This question already has answers here:
Leafletjs map - map.invalidateSize is not working
(2 answers)
Closed 3 years ago.
image 1
image 2
leaflet.html
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="templates/leaflet/my_leaflet.css">
<div id="map"></div>
<script>
// Initialize leaflet.js
var L = require('leaflet');
// Initialize the map
var map = L.map('map', {
scrollWheelZoom: false
});
// Set the position and zoom level of the map
map.setView([49.42854, 32.06207], 6);
// Initialize the base layer
var osm_mapnik = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19,
attribution: '© OSM Mapnik OpenStreetMap'
}).addTo(map);
$.getJSON("templates/leaflet/Ukraine.json", function (data) {
L.geoJson(data).addTo(map);
});
</script>
my_leaflet.css
#map
{
width: auto;
height: 700px;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
body { margin:0; padding:0; }
When I start my Electron.js application and click the link to page 'leaflet.html', I see the map as at the first image.
But if resize application window to any size the map downloads good as at the second image.
I tried https://github.com/Leaflet/Leaflet/issues/3002 and Leaflet flipping tiles in electron solutions but nothing helped
Thank you Jan Wendland
I used this solution Leafletjs map - map.invalidateSize is not working after your comment
setTimeout(function(){ map.invalidateSize()}, 400);
Related
Using latest leaflet library, I generated a plot in python from a GraDs file and supposedly I have the correct corners or bounds, but when overlaying in leaflet does not fit.
here is the simple code
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<style type="text/css">
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id = "map"></div>
<script>
// Creating map options
var mapOptions = {
center: [14, -85],
zoom: 5
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
// var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// map.addLayer(layer); // Adding layer to the map
var esriImages = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
var esriLabels = new L.TileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}');
var esri = L.layerGroup([esriImages, esriLabels]);
//default basemap
map.addLayer(esri);
// Creating Image overlay
var imageUrl = 'https://i.imgur.com/KNTRLHR.png';
var imageBounds = [[30,-115], [6,-59.03836]];
var overlay = L.imageOverlay(imageUrl, imageBounds,{ opacity:.7});
overlay.addTo(map);
map.on('click', function(e) {
// var popup = L.popup()
// .setLatLng(e.latlng)
// .setContent('<p>Hello, world!</p>')
// .openOn(map);
console.log ('click en ',e.latlng);
});
</script>
</body>
</html>
The representation of the image is like this as per NOAA site but is poor quality and also if i overlay does not fit.
What is the issue or how to fix it.
Thanks for any help
Edited: 2020.10.17 04Z
I have a KMZ file that i load into my google maps application via link using javascript. The file works perfectly in Google Earth. The problem is in my application when i click in one of the many elements (areas): the returned description data is always from only one of the elements, not displaying the actual clicked, correct, element. This is what i've tried:
Check if the click event in the map is correct by placing a marker in the clicked position, it is correct.
Convert the data into KML using Google Earth, place it into my google drive as public, and using a direct download link from google drive in my application. It displayed the data but the error continued.
Created the most basic/blank application using just the layer to make sure anything else in my other application is interfering. Also didn't work.
The file is in this website: https://www.voanaboa.pt/codigo-drone named as "Regulamento RPA_ver_5.0.kmz”
Here's the only file that creates a basic application using the kmz file, i've removed my API key for privacy.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'https://www.voanaboa.pt/Files/downloads/Regulamento-RPA-ver-5.0.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
Most (but not all) of your placemarks have the same ID "ID_00000"). If I change that to be unique, the polygon's descriptions become unique:
example with unique ids
Per the KML reference, that doesn't have to be unique (it is a "stanard XML ID", but I am guessing the rendering code is assuming it is.
code snippet with updated kmz file:
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'http://www.geocodezip.com/geoxml3_test/kmz/Regulamento-RPA-ver-5.0a.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>
I am working on something that leverages the Google Maps API to draw n number of polygons using GeoJSON. I was successful in drawing it, but I also want to increase the opacity of the polygons drawn, as well as remove an ugly outline on each of the polygons.
I looked through the documentation on the Google Maps API here, but it only tells you how to load the GeoJSON file, not modify traits of the drawn polygons.
map.data.loadGeoJson('google.json');
That up there is how you load the GeoJSON and the only command that you can use. I know it seems that I haven't tried anything, but I have and none of it's substantial enough to include in this question.
So my question is - How do you remove the outline from GeoJSON drawn images and also increase the opacity?
Below is also an image of what it currently looks like:
use fillOpacity: 1 and strokeWeight: 0 in style options
https://plnkr.co/edit/puMK8mAskLiaExmNKIEI?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Styling</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// Load GeoJSON.
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
// Set the stroke width, and fill color for each polygon
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return {
fillColor: color,
fillOpacity: 1,
strokeWeight: 0
};
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
This question already has an answer here:
Google Maps Api V3 - Styling countries or cities
(1 answer)
Closed 5 years ago.
I want to show in my website only certain places using GoogleMap.It shouldn't show any small places.Only major places should be visilble in map.What is procedure to obtain this?
Set your lat/lon to the location of a post office (or other city indicator).
Then, use the zoom property to fix to the level you want to encompass.
See: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here is the code form the example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Try that script at map.zoom = 16. Should be close to city view. London I think.
You can also set map bounds, but that is a lot harder. You would need to find your location, then plot geometry around that area, define the points, and then, zoom all points into view.
All of this is possible, but you showed me no code, so I'm not showing any back.
Hope you found something useful,
I am looking for a way to add images to a 'leaflet map' using Javascript.
What I want to do is to load image, adjust its size and position, and attach it to a leaflet map.
Here's a basic demo showing how to add an image using imageOverlay.
You adjust the position and size of the image by providing imageBounds
// center of the map
var center = [-33.8650, 151.2094];
// Create the map
var map = L.map('map').setView(center, 5);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © OpenStreetMap',
maxZoom: 18
}).addTo(map);
// add a marker in the given location
L.marker(center).addTo(map);
L.marker([-35.8650, 154.2094]).addTo(map);
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds = [center, [-35.8650, 154.2094]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
html,
body {
height: 100%;
}
#map {
height: 100%;
}
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css">
<div id="map"></div>