i'm new in html and leaflet, i don't know how to use plugins in leaflet
right now i'm working with polyline decorator plugins but i don't know how to use it right
i'm trying following tutorial on internet, here my code
var arrow = L.polyline([[107.63576,-2.72322], [107.65699,-2.7366]], {}).addTo(map);
var arrowHead = L.polylineDecorator(arrow, {
patterns: [
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
]
}).addTo(map);
and here my head section
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="polyline/dist/leaflet.polylineDecorator.js"></script>
<script src="polyline/src/L.polylineDecorator.js"></script>
</head>
You have the latitudes and longitudes swapped in the call to L.polyline. Try this line instead:
var arrow = L.polyline([[-2.72322, 107.63576], [-2.7366, 107.65699]], {}).addTo(mymap);
Related
The problem I am having is that the map is not showing up at all, there is a blank spot where the map is meant to be. I have followed Leaflet's quick-start guide and I still have yet to determine why my map does not show.
Below is the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="mapid">
</div>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
}).addTo(mymap);
</script>
</body>
</html>
You import the Leaflet JavaScript file and have your page code within the same HTML <script> tag. In such case, browsers are supposed to ignore (not execute) the content between the script tags, i.e. your page code is not executed.
Simply separate in 2 different script tag pairs:
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// etc.
</script>
I'm using leaflet v1.5.1.
The error from Chrome is:
leaflet.js:5 Uncaught TypeError: this.callInitHooks is not a function
at Object.i [as Marker] (leaflet.js:5)
at map1Rose2.php:77
Below is the minimal code that will reproduce the issue in Chrome. I do NOT see an issue with the function. The error appears at the first 'var' (line 77) in the .
I've prodded and poked at this thing to exhaustion does anyone have an idea?
<!DOCTYPE html>
<html lang="en">
<head>
<title>NCM Map of Station Locations</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon-32x32.png" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ******************************** Load LEAFLET from CDN *********************************** -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<!-- ********************************* End Load LEAFLET **************************************** -->
<!-- ******************************** Load ESRI LEAFLET from CDN ******************************* -->
<script src="https://unpkg.com/esri-leaflet#2.2.4/dist/esri-leaflet.js"
integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.css"
integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ=="
crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.js"
integrity="sha512-uK5jVwR81KVTGe8KpJa1QIN4n60TsSV8+DPbL5wWlYQvb0/nYNgSOg9dZG6ViQhwx/gaMszuWllTemL+K+IXjg=="
crossorigin=""></script>
<!-- ******************************** End ESRI LEAFLET ***************************************** -->
<!-- ******************************** Added Functionality *************************************** -->
<link rel="stylesheet" href="css/leaflet_numbered_markers.css" />
<link rel="stylesheet" href="css/L.Grid.css" />
<link rel="stylesheet" href="css/L.Control.MousePosition.css" />
<link rel="stylesheet" href="css/control.w3w.css" />
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css" />
<link rel="stylesheet" type="text/css" href="css/maps.css">
<link rel="stylesheet" type="text/css" href="css/leaflet/leaflet.contextmenu.min.css">
<script src="js/leaflet_numbered_markers.js"></script>
<script src="js/L.Grid.js"></script> <!-- https://github.com/jieter/Leaflet.Grid -->
<script src="js/L.Control.MousePosition.js"></script> <!-- https://github.com/ardhi/Leaflet.MousePosition -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
<script src="js/control.w3w.js"></script>
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
<script src="js/leaflet/leaflet.contextmenu.min.js"></script>
<script src="https://unpkg.com/leaflet.maidenhead#1.0.0/src/maidenhead.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geometryutil#0.9.1/src/leaflet.geometryutil.min.js"></script>
<!-- https://github.com/Turfjs/turf -->
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<style>
</style>
</head>
<body>
<!-- the map div holds the map -->
<div id="map"></div>
<script>
var WA0TJT = L.Marker(new L.LatLng(39.202911,-94.602887),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedDivIcon({number: '1' }),
title:"marker_1" }).addTo(fg).bindPopup("1<br><b>ID: #0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup();
var KA0OTL = L.Marker(new L.LatLng(39.233702,-94.635126),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedGreenDivIcon({number: '2' }),
title:"marker_2" }).addTo(fg).bindPopup("2<br><b>ID: #0025</b><br>KA0OTL<br>Jeff Libby<br>Platte Co., MO Dist: A<br>39.233702, -94.635126<br>EM29qf").openPopup();
/*
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [base, pois]
});
*/
var fg = new L.featureGroup();
function circleKoords(e) { };
</script>
</body>
</html>
You have to call new L.Marker() or L.marker()
To fix your second error (in the comments) you have to define first your featureGroup and then create the markers.
var fg = new L.featureGroup();
var WA0TJT = L.Marker(new L.LatLng(39.202911,-94.602887),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedDivIcon({number: '1' }),
title:"marker_1" }).addTo(fg).bindPopup("1<br><b>ID: #0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup();
also you will nothing see on the map, because you are not added your featuregroup to the map. And you need a map instance.
var map = L.map('map', {
...
});
fg.addTo(map);
Having a problem with leaflet routing machine. The very basic code
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
]
}).addTo(mymap);
does run fine.
But as soon as I add more code like described at http://www.liedman.net/leaflet-routing-machine/tutorials/ I get errors.
For example this does not work:
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(mymap);
It throws back TypeError: L.Control.Geocoder is undefined.
I just redownloaded the plugin to make sure nothing has been accidentially modified, but still.
My index.html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Map</title>
<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />
<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />
<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />
<link type="text/css" rel="stylesheet" href="css/mycss.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>
</head>
<body>
<!-- mapbox -->
<div id="map" class="map"></div>
<!-- custom script containing routing machine and other stuff (which works all fine)!-->
<script type="text/javascript" src="javascript/myscript.js"></script>
</body>
</html>
Paths to .js and .css files are all fine.
My leaflet map var with one of the basemaps looks like this:
var mymap = L.map('map', {
center: [57.89, 12.02],
zoom: 13.5,
fullscreenControl: true
});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{ attribution: '© OpenStreetMap'
}).addTo(mymap);
What could cause the TypeError: L.Control.Geocoder is undefined error and how to fix it?
I installed https://github.com/perliedman/leaflet-control-geocoder plugin and now it works. Its stated nowhere that this is a prerequisiste though...
I'm trying to make a static map with Leaflet plugin. I've already prepared a 1024x768 map and made some settings for a static map. I have a problem with setView - I can't make it display my map properly. Here's my code:
#mapid
{
height: 768px;
width: 1024px;
}
<!doctype html>
<html>
<head>
<title>Gothic 3 Map</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mapid" ></div>
<script>
var mymap = L.map('mapid', {
dragging: false,
zoomControl: false,
touchZoom: false,
doubleClickZoom: false,
scrollWheelZoom: false
}).setView([0,0], 0);
L.tileLayer('https://vignette.wikia.nocookie.net/gothic/images/a/a6/Mapa_Myrtany_%28Gothic_3%29.jpg/revision/latest?cb=20080816123521&path-prefix=pl', {
minZoom: 0,
id: 'myrtana'
}).addTo(mymap);
document.getElementsByClassName( 'leaflet-control-attribution' )[0].style.display = 'none';
document.getElementsByClassName( 'leaflet-top' )[0].style.display = 'none';
var marker = L.marker([0, 0]).addTo(mymap);
</script>
</body>
</html>
I just want to make this map fitting into this grey rectangle.
I am trying to make an interactive map of trails my company owns for my companies website.
I have markers displayed on all the trailheads and I want them to display a popup of certain information located inside of a GeoJson file.
Here is my HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Map</title>
<!-- leaflet -->
<link rel="stylesheet" href="lib/leaflet/leaflet.css" />
<script src="lib/leaflet/leaflet.js"></script>
<!--Mapbox -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
<script src="data/trailheads.js"></script>
<style type="text/css">
#map {
height: 400px;
}
</style>
</head>
<body>
<h1> Map </h1>
<div id="map"></div>
<script>
var map = L.map('map').setView([43.8476, 18.3564], 13);
var trailheadsLayer = L.geoJson(trailheads)
.bindPopup()
.addTo(map);
map.fitBounds(trailheadsLayer.getBounds());
L.tileLayer('https://api.mapbox.com/styles/v1/spatrick467/cj3yh6guz21os2so16xhs4son/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3BhdHJpY2s0NjciLCJhIjoiTVNaNG1OWSJ9.gq6641R9QJG5jWyO5tKIJw', {
foo: 'bar'
}).addTo(map);
</script>
</body>
</html>
The GeoJson file is quite large so I will attach it into a mediafire download (along with the HTML, just incase you need it)
Index.html
Trailheads GeoJson file
Assuming that trailheads.js is a valid jsonp file, you should specify for each feature what information you will display. If you look at the leaflet docs, there's an option: 'onEachFeature' which you can use.
var trailheadsLayer = L.geoJson(trailheads, {
onEachFeature: function(layer, feature) {
feature.bindPopup('popup content');
}
});
You can change 'popup content' for a property of your geoJSON, e.g. 'feature.properties.name'.