I am using Leaflet library recently, i find it very easy to work and learn, the tutorials are very good with GeoJSON and Control Layers, but i not find one tutorial about the use of control layers with GeoJASON files, i write this script:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<script src="leaflet-src.js"></script>
<script src="GeoJason/mpios.geojson"type="text/javascript"></script>
<script src="GeoJason/roads.geojson"type="text/javascript"></script>
<script src="GeoJason/city.geojson"type="text/javascript"></script>
<script src="GeoJason/towns.geojson"type="text/javascript"></script>
<style>
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([20.990584, -98.65644], 12);
L.geoJson(mpios).addTo(map);
L.geoJson(roads).addTo(map);
L.geoJson(city).addTo(map);
L.geoJson(towns).addTo(map);
var baseLayers = {
"roads": roads,
"mpios": mpios
};
var overlays = {
"city": city,
"towns": towns
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
but it display the layers and the control buttons not work, thx.
The layer values you are setting in your baseLayers and overlays is your geoJSON feature sets, but they should be leaflet layers or references to layers that exists on your map.
You can store the layer refernece for each of your geoJSON layers by setting the return value from L.geoJson to a variable like this:
var mpios_l = L.geoJson(mpios).addTo(map);
var roads_l = L.geoJson(roads).addTo(map);
var city_l = L.geoJson(city).addTo(map);
var towns_l = L.geoJson(towns).addTo(map);
Then add these items to your control.
var baseLayers = {
"roads": roads_l,
"mpios": mpios_l
};
var overlays = {
"city": city_l,
"towns": towns_l
};
L.control.layers(baseLayers, overlays).addTo(map);
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 problem with implementing the newest version of leaflet draw to my project.
The only requirement is to only use a CSS & Script links to get the plugin to work...(If it's not possible just ignore and try another way)
Basically, it should work just as on their website - https://freedraw.herokuapp.com/
What should I do to load the newest version of the plugin? What am I doing wrong?
I'm a beginner in this so thanks for any help.
<html>
<head>
<title>Free Draw</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css"/>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;">
</div >
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js" >
</script >
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"> </script >
<script>
//Creating map and setting zoom
var map = L.map('map').setView([45.8650, -75.2094], 3);
// Set up the OSM layer
L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.{ext}', {
ext: 'png',
maxZoom: 18,
attribution: 'Wikimedia maps | Map data © <a target="_blank" href="https://openstreetmap.org/copyright">OSM contributors</a>'
}).addTo(this.map);
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
});
</script >
</body>
</html>
The latest version is 1.0.4 - so
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"> </script >
should fetch it in for you.
I am creating a map that consists of three maps and markers total that can be switched between like in this leaflet example, although when I test it, instead of the each map rendering as a single version filling the map frame they display as many multiple in a tile layout. Below is my code I am currently using, note that the images I am using for the maps are not actually maps thus I am using the 'L.CRS.Simple'.
This is the result I was expecting (sans the makers and with my images), maybe someone can spot where I went wrong?
-
<html>
<head>
<title>Interactive Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<style>
#map {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div id="map">
<script>
var map1 = L.tileLayer('map1.png');
var map2 = L.tileLayer('map2.png');
var map3 = L.tileLayer('map3.png');
var markers = L.layerGroup(); //Leaving empty for the time being, using just to create check box in menu
var map = L.map('map', {
crs: L.CRS.Simple,
layers: [map1, map2, map3, markers],
maxZoom: 5
});
var baseMaps = {
"Map 1": map1,
"Map 2": map2,
"Map 3": map3
};
var overlayMaps = {
"Markers": markers
};
var bounds = [[0,0], [1000,1000]];
L.control.layers(baseMaps, overlayMaps, bounds).addTo(map);
map.fitBounds(bounds);
</script>
</div>
</body>
Yes, I am using locally stored images, no, I do not have images setup to use the standard URL format, if you choose to try my code just sub in 3 random pictures.
Here is a pic of what is occurring:
You forgot a 's' to markers
var overlayMaps = {
"Markers": markers
};
It should work now ;)
I'd like to localise the map generated by Gmaps4rails, so I can show place names in the users desired language. Google documents how to do this here: https://developers.google.com/maps/documentation/javascript/examples/map-language
I'm using a fairly standard (and currently functional) implementation of Gmaps4rails, which you can see here.
handler = Gmaps.build('Google');
handler.buildMap({
provider: { styles: mapStyle },
internal: {id: 'map'}
}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
Rendering to the html...
<div class="map-container">
<div id="map"></div>
</div>
I just need to find out where to define the language code. I've tried adding it as an option to the provider, with no joy (e.g. provider: { styles: mapStyle, language: 'zh-TW' }).
I've scoured the documentation (and source), but can't seem to find any info on this. Any help would be appreciated!
You have to indicate the language in the script.
For example in the Maps API v3 Now Speaks Your Language:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR">
You can find the list of languages here.
Here is the code sample:
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example displays a map with the language and region set
// to Japan. These settings are specified in the HTML script element
// when loading the Google Maps JavaScript API.
// Setting the language shows the map in the language of your choice.
// Setting the region biases the geocoding results to that region.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 35.717, lng: 139.731}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=ja®ion=JP"
async defer>
</script>
</body>
</html>
As you can see in this code line, key=YOUR_API_KEY&callback=initMap&language=ja®ion=JP, language is set to jp = Japanese.
Also check their working sample with a dynamic language setting.
Hope this helps!
I'm trying to migrate my application to latest version of Google map API and found that Google appends it's own items by default from Google Places directory to the map.
It does not look right together with my own records as it creates duplicate items on the map which can be placed in correctly.
Is there an option how to hide this local businesses or to control what is shown and what is not?
here is sample code:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(37.422833333333,25.323166666667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
As you can see on map, there are few tiny icons, which you can click on and information would appear in bubble. I need to hide this icons or at least disable on click event for this items.
Just a pointer - this seems possible with custom styled maps. If I'm not mistaken, the feature type you're looking for would be poi.business, whose visiblity you would turn off.
There's a wizard to help you build the options array.
You can remove it by adding the following code:
var styles = [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});