Recently I’ve created an app that uses the OpenWeathermap API and retrieves precipitation data and plots it on the map using Kivy. After plotting it saves it as an HTML file, it work properly as well The problem is even after installing Mapview properly and using the command garden install Webview python doesn’t recognize mapview as a part of Kivy.
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.scrollview import ScrollView
from kivy.uix.image import Image
from kivy.uix.popup import Popup
from kivy.uix.gridlayout import GridLayout
from kivy.uix.textinput import TextInput
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.webview import WebView
import folium
API_KEY = 'YOUR_API_KEY' # Replace this with your OpenWeatherMap API key
lat, lon = 40.7128, -74.0060 # Example coordinates (New York City)
# Create a Folium map centered around the specified coordinates
m = folium.Map(location=[lat, lon], zoom_start=10)
# Add the precipitation layer from OpenWeatherMap
folium.TileLayer(
tiles=f'http://tile.openweathermap.org/map/precipitation_new/{{z}}/{{x}}/{{y}}.png?appid={API_KEY}',
attr="OpenWeatherMap",
name="Precipitation",
overlay=True,
).add_to(m)
# Save the map as an HTML file
m.save('precipitation_map.html')
class WebViewApp(App):
def build(self):
# Create a layout
layout = BoxLayout(orientation='vertical')
# Create a WebView widget
webview = WebView(url="precipitation_map.html")
# Add WebView widget to the layout
layout.add_widget(webview)
return layout
if __name__ == '__main__':
WebViewApp().run()
The terminal retrieves –
Traceback (most recent call last):
File "c:/Users/Venkat/Desktop/Python/Weather App (Large Scale)/map.py",
line 15, in <module>
from kivy.uix.webview import WebView
ModuleNotFoundError: No module named 'kivy.uix.webview'
I did fill in the API key but I think its a bit sensitive.
I Installed Kivy garden. I tried everything but nothing seems to work. I’m a bit new to kivy and need a little assistance. If I use tkinter it just shows the html code. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_85b4640f91cdb707a280787543436991 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
.leaflet-container { font-size: 1rem; }
</style>
</head>
<body>
<div class="folium-map" id="map_85b4640f91cdb707a280787543436991" ></div>
</body>
<script>
var map_85b4640f91cdb707a280787543436991 = L.map(
"map_85b4640f91cdb707a280787543436991",
{
center: [40.7128, -74.006],
crs: L.CRS.EPSG3857,
zoom: 10,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_1e40d4328a3f0634368b74bf9588fc8c = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
);
tile_layer_1e40d4328a3f0634368b74bf9588fc8c.addTo(map_85b4640f91cdb707a280787543436991);
var tile_layer_edd239345d998d74aacdd4cb6019f163 = L.tileLayer(
"http://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=7dd61afc5903f81a45839eb528dcbabd",
{"attribution": "OpenWeatherMap", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
);
tile_layer_edd239345d998d74aacdd4cb6019f163.addTo(map_85b4640f91cdb707a280787543436991);
</script>
</html>
