D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wboykinm
Full window
Github gist
mapbox hover tooltip example with image
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Show tooltips on hover</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script> <link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id='map'></div> <script> L.mapbox.accessToken = 'pk.eyJ1IjoibGFuZHBsYW5uZXIiLCJhIjoicUtlZGgwYyJ9.UFYz8MD4lI4kIzk9bjGFvg'; var map = L.mapbox.map('map', 'landplanner.f505d476') .setView([39.12367, -76.81229], 9); var myLayer = L.mapbox.featureLayer().addTo(map); var geojson = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: { title: 'Washington, D.C.', 'marker-color': '#f86767', 'marker-size': 'large', 'marker-symbol': 'star', url: 'https://en.wikipedia.org/wiki/Washington,_D.C.', description: '<img width="250px" src="https://www.whitehouse.gov/sites/default/files/image/whitehouse_historypg.jpg"/>' }, geometry: { type: 'Point', coordinates: [-77.03201, 38.90065] } }, { type: 'Feature', properties: { title: 'Baltimore, MD', 'marker-color': '#7ec9b1', 'marker-size': 'large', 'marker-symbol': 'star', url: 'https://en.wikipedia.org/wiki/Baltimore', description: '<img width="250px" src="https://www.amillionlives.net/wp-content/uploads/2011/07/Baltimore-Attractions.jpg"/>' }, geometry: { type: 'Point', coordinates: [-76.60767, 39.28755] } }] }; myLayer.setGeoJSON(geojson); myLayer.on('mouseover', function(e) { e.layer.openPopup(); }); myLayer.on('mouseout', function(e) { e.layer.closePopup(); }); </script> </body> </html>
https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js