I have a geoJSON object that is added to the map like this:
L.geoJSON(seine_mar).addTo(map)
Which creates the following:
I would like to add a text on hover of this zone. It is possible with markers, like this for example:
L.marker([value.lat, value.lon], { title: "Hi there"}).addTo(map);
How could I achieve the same with the geoJSON, resulting in displaying a text on hover ? According to the docs, there is no such property as title or label.
Example of desired result (fear my paint skills):
Try using bindTooltip() with permanent option
https://leafletjs.com/reference-1.7.1.html#tooltip
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'Imagery © Mapbox',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var campus = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.74620006835170],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
]
]
}
};
L.geoJSON(campus)
.bindTooltip('Hi there', {
permanent: true,
direction: 'center'
})
.addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<div id='map'></div>
You can use the onEachFeature function of L.geoJSON() to loop through all layers and then add a Tooltip with layer.bindTooltip("HI") to it.
L.geoJSON(seine_mar,{
onEachFeature: function(feature, layer){
layer.bindTooltip('Hi there', {permanent: true}).openTooltip();
// or over a feature property layer.bindTooltip(feature.properties.customTitle)
}
}).addTo(map)
Related
I am using the SimpleHTTPServer for Python to display a basic Leaflet map.
I wish to create a series of points on the map, using a json.gz file as input.
The contents of this file (input.json.gz) look like this:
[[25.0153,55.45758],[25.01767,55.45569],[25.02065,55.45327],[25.02655,55.44846]]
My hardcoded code looks like this:
var pointA = new L.LatLng(25.146619, 55.225746);
var pointB = new L.LatLng(25.198696, 55.269794);
How do I read the json.gz file in javascript and iterate across it creating points? Ultimately I will collect these points into different pointLists and from this render a polyline. Full code below:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>
<!-- reference to Leaflet CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!-- reference to Leaflet JavaScript -->
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- set width and height styles for map -->
<style>
html, body, #map {
height: 100%;
width: 100%;
}
/* css to customize Leaflet default styles */
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
background: #e93434;
color: #ffffff;
}
</style>
</head>
<body>
<!-- place holder for map -->
<div id="map"></div>
<script>
// create map object, tell it to live in 'map' div and give initial latitude, longitude, zoom values
var map = L.map('map', {scrollWheelZoom:false}).setView([25.198696, 55.269794], 15);
// add base map tiles from OpenStreetMap and attribution info to 'map' div
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var pointA = new L.LatLng(25.146619, 55.225746);
var pointB = new L.LatLng(25.198696, 55.269794);
var pointList = [pointA,pointB];
L.polyline(pointList,{icon: test_icon,color:'red','weight':10}).bindPopup(customPopup,customOptions).addTo(map);
</script>
</body>
</html>
EDIT
I have now reformatted my data into geojson format. Here is an exert:
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "LineString",
"coordinates": [
[
25.1167,
55.19259
],
[
25.11285,
55.18714
],
[
25.11141,
55.1851
],
[
25.11077,
55.18422
],
[
25.11001,
55.18311
],
[
25.10855,
55.18105
],
[
25.10722,
55.17914
],
[
25.10644,
55.17805
],
[
25.10572,
55.17712
]
]
},
"type": "Feature",
"properties": {
"url": "blah",
"name": "blue"
}
},
I then try and load it using AJAX.
var geojsonLayer = new L.GeoJSON.AJAX("polylines.geojson");
geojsonLayer.addTo(map);
I've also added <script src="./polylines.geojson" type="text/javascript"></script> to the top of the html file.
However, this returns file not found. I've the file located in the same directory as index.html
code 404, message File not found
127.0.0.1 - - [13/Mar/2017 14:52:40] "GET polylines.geojson HTTP/1.1" 404 -
I am trying to render a GeoJSON polygon from a variable called data using the Google Javascript API. The overlay does not render properly and I do not know why. Can somebody please show me how to render a polygon on the map?
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var x=new google.maps.LatLng(40.75597,-73.974228);
function initialize() {
var data = { "type" : "Polygon", "coordinates" : [ [ [ -73.974228, 40.75597 ], [ -73.983841, 40.742931 ], [ -74.008133, 40.75307500000001 ], [ -73.998131, 40.765915 ], [ -73.974228, 40.75597 ] ] ] }
var mapProp = {
center:x,
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.data.loadGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
I get a javascript error with your code: Uncaught InvalidValueError: not a Feature or FeatureCollection. Make your polygon a "Feature":
var data = {
type: "Feature",
geometry: {
"type": "Polygon",
"coordinates": [
[
[-73.974228, 40.75597],
[-73.983841, 40.742931],
[-74.008133, 40.75307500000001],
[-73.998131, 40.765915],
[-73.974228, 40.75597]
]
]
}
};
working fiddle
code snippet:
function initialize() {
var data = {
type: "Feature",
geometry: {
"type": "Polygon",
"coordinates": [
[
[-73.974228, 40.75597],
[-73.983841, 40.742931],
[-74.008133, 40.75307500000001],
[-73.998131, 40.765915],
[-73.974228, 40.75597]
]
]
}
};
var mapProp = {
center: new google.maps.LatLng(40.75597, -73.974228),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #googleMap {
width: 100%;
height: 100%;
}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="googleMap"></div>
Firstly, geojson object must be a Feature or FeatureCollection.
Secondly, use:
map.data.addGeoJson(data) to load geojson from variable
instead of:
map.data.loadGeoJson(data) for loading geojson from .json files
More info in Google Maps API
My code is this
heat = L.heatLayer([], { maxZoom: 12 }).addTo(map);
$.getJSON("js/example-single.geojson", function(data) {
var geojsosn = L.geoJson(data, {
onEachFeature: function (feature, layer) {
console.log(feature.geometry.coordinates[0] ,feature.geometry.coordinates[1]);
heat.addLatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]);
}
});
but am getting an error "Uncaught TypeError: Cannot read property 'lat' of undefined"
please tell how to fix this, if my code is wrong somebody show me how to parse json data for heat map in mapbox
my json data is
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [13.353323936462402, 38.11200434622822]},
"properties": {"marker-color": "#000"}
}
]
}
addLatLng probably expects L.latLng objects or something that has lat & lng properties.
var heat = L.heatLayer([], { maxZoom: 12 }).addTo(map);
$.getJSON('js/example-single.geojson', function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function(feature, layer) {
feature.geometry.coordinates.forEach(function(p) {
heat.addLatLng(L.latLng(p[0], p[1]));
});
}
});
});
I'm building a web-map layout for Jekyll based on a blog post, although I'm using Leaflet.js instead of Mapbox.js.
In the front matter of a post, markers are defined as a list of arrays. The format is as follows:
[ "lng, lat", "Popup Content", "Font-awesome Icon", "Color of Marker"]
Two markers might look like this:
markers:
- ["-84.312, 33.845", "Regional Office", "home", "red"]
- ["-84.393, 33.753", "Federal Building", "building", "blue"]
I take the options from the marker and add them to the GeoJSON representation as properties. In order to use Leaflet.awesome-markers each item must be represented as a Marker Layer instead of a GeoJSON Layer. Luckily the GeoJSON Layer provides a method to convert each point to a Marker Layer.
It seems that even though I have access to the feature (and therefore the features properties), I can't get the variable feature.properties.icon to evaluate. After Jekyll works it's magic and produces the static HTML files I see that the icon property is still set to "feature.properties.icon" instead of the value of that variable.
console.log(feature.properties.icon) evaluates to "home" as expected in this case.
Post Front-Matter:
---
title: "This is an Example of a Map-Centric Post"
layout: post
tags:
- Map
map: leaflet
center: "33.733784, -84.389369"
zoom: 9
map-background: terrain
markers: # [ Coordinates, Popup Content, Font-Awesome Icon, Color]
- ["-84.312, 33.845", "Office", "home", "red"]
- ["-84.393, 33.753", "Federal Building", "building", "blue"]
---
leaflet.html include:
<script>
var toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors, CC-BY-SA',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20
}),
terrain = L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors, CC-BY-SA',
subdomains: 'abcd',
minZoom: 4,
maxZoom: 18
}),
map = L.map('map', {
layers: [{{page.map-background}}]
}).setView([ {{page.center}} ], {{page.zoom}} );
map.touchZoom.disable();
map.scrollWheelZoom.disable();
if (map.tap) map.tap.disable();
{% if page.markers %}
var markers = [{
"type":"FeatureCollection",
"features":[
{% for marker in page.markers %}
{
"type":"Feature",
"properties":{
"popup": "{{marker[1]}}",
"icon": "{{marker[2]}}",
"color": "{{marker[3]}}"
},
"geometry":{
"type":"Point",
"coordinates":[ {{ marker[0] }} ]
}
}{% if forloop.last == false %},{% endif %}
{% endfor %}
]
}];
L.geoJson(markers, {
pointToLayer: function (feature, latlng) {
console.log(feature.properties.icon) // This works!
var mapMarker = L.AwesomeMarkers.icon({
icon: feature.properties.icon, // This doesn't work
prefix: 'fa',
markerColor: feature.properties.color
});
return L.marker(latlng, {
icon: mapMarker
});
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.popup);
}
}).addTo(map);
{% else %}
markerLayer.clearLayers();
{% endif %}
</script>
Developer Tools:
Edit:
Switching to bracket notation icon: feature['properties']['icon'] worked only on the index.html page, and not the blog-post page.
I managed to create map with leaflet.js & jQuery mobile.
Now I need to get rid of jQuery mobile and just use jQuery instead.
Everything works just fine, but I can't click the polygons which I draw on the map anymore. It worked with jQuery mobile before.
Any hints?
here is my simplified code:
var map = L.map('map', {
zoomControl: false
});
L.tileLayer('http://{s}.tile.cloudmade.com/**apikey***/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);
For the polygons:
var geojsonFeature = { "type": "Polygon","coordinates": value.polygon};
var polycolor = getGebColor(value.geb_nr);
var geojsonStyle = {"color": polycolor};
polygons[i] = L.geoJson(geojsonFeature, {style: geojsonStyle}).addTo(map);
// make clickable
polygons[i].on('click', function(e) {
if (lastMarker) {
map.removeLayer(lastMarker);
}
var url = "http://*****/tugetherMap.php?callback=&id="+value.id+"&type=B";
markers[i] = L.marker([value.point[1], value.point[0]]).addTo(map);
gebName = value.nameLang;
markers[i].bindPopup("<a class='gebOnMap' href='gebaeude.html' >"+gebName+"</a>").openPopup();
lastMarker = markers[i];
});
the polygons[i].on('click',...) is the part which does not work anymore. It works for map.on('click',...)
You need to bind each of your polygons to a click event handler, like so.
L.geoJson(geojsonFeature, {
onEachFeature: function(feature, layer) {
layer.on('click', function(e) {
// Do whatever you want here, when the polygon is clicked.
});
}
}).addTo(map);
Had a issue with this and solved it with the following
function onEachFeature(feature, layer) {
// Do all your popups and other binding in here
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
};
L.geoJson(geojsonFeature, {
onEachFeature: onEachFeature
}).addTo(map);
In your code I guess it would be
polygons[i] = L.geoJson(geojsonFeature, {onEachFeature: onEachFeature,
style: geojsonStyle}).addTo(map);
function onEachFeature(feature, layer) {
// Some jazz and magic you need to do with your layer and feature objects
}
The solution for me was to downgrade Leaflet to 0.7.3 or upgrade to 1.0-beta2 (latest version at the time of writing).