I am new to leaflet.js and CartoDB.js. What I am trying to do is create a editable webmap, sourcing (and writing) data to my CartoDB SQL tables. I can render the map from CartoDB, but when I add the links to leaflet.js my map layers disappear. This JS Fiddle shows this. If you comment out lines 5 and 6, it works:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
You don't need to add the Leaflet library's javascript and stylesheet when using CartoDB, just include the Leaflet Draw's assets, enable the drawControl option in the options of L.Map and you're good to go:
Assets:
<link type="text/css" rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<script type="text/javascript" src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
Map:
new L.Map('cartodb-map', {
center: [40,-98],
zoom: 4,
drawControl: true
});
Here's a fork of your Fiddle: http://jsfiddle.net/qnzqtgy7/
Related
expected result:
My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.
This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.
result:
The map box however does not show up in the web browser when I follow the above logic.
It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.
This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.
const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<!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">
<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>
<title>Document</title>
<style>
#map{
height: 800px;
width: 800px;
margin: 5rem auto;
}
</style>
<h2>
Critiacally Listed Species in BC
</h2>
</head>
<body>
<div id="map"></div>
<script>
//src="PAWSmap.js";
var map = L.map('map',{
center: [54.259070, -124.943178],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>
Question:
Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?
The syntax to load an external JavaScript file from your HTML page is:
<script src="path/to/file.js"></script>
Note that the src attribute and its value are within the <script> tag angle brackets, not as a child (i.e. not in between the opening and closing tags).
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for further details about the syntax and possible attributes.
This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Closed 1 year ago.
I have a very simple example map that I would like to add a shapefile to. The shapefile is zipped and I've checked that it shows up here http://leaflet.calvinmetcalf.com/#3/32.69/10.55, however it does not show up on my example map. Any help with this would be greatly appreciated.
Code
<!DOCTYPE html>
<html>
<head>
<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>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<script src="Plugins//shp.js"></script>
<script src="Plugins//leaflet.shpfile.js"></script>
<!--
Needed?
-->
<style>
#map {
position: relative;
margin: 0 0 0 0;
height: 650px;
width: 700px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
minZoom: 1,
maxZoom: 9
});
map.setView([34.15, -112.0], 7)
map.setMaxBounds(map.getBounds());
Streets = L.tileLayer(
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYXVzdGluY2FyZXkiLCJhIjoiY2thanlmdGU4MGFjeTJ5bGJqcHgzZTB3NiJ9.qkuctvbWSIpVLidV8ptKcg', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
}).addTo(map);
var shpfile = new L.Shapefile('TestShapefile.zip');
shpfile.addTo(map);
var overlayMaps = {
"TestShapefile": shpfile
};
L.control.layers(overlayMaps).addTo(map);
</script>
</body>
</html>
In the Plugins folder that I reference I have the following javascripts:
leaflet.shpfile.js and
shp.js
This can happen if you have included a url with a domain different than yours, then you would receive a CORS error. It is purely for controlling what a domain can request from another one. f.i
var shpfile = new L.Shapefile("https://someOtherDomain.com/congress.zip");
So try placing the file locally . F.i where you have also your .js files like this:
var shpfile = new L.Shapefile("./congress.zip");
Here is a demo
Note also that you have to run your index.html inside a web server and not via the file system by opening the html file on the browser. An alternative would be to run it via a module bundler like webpack or parcel etc. similar to the demo.
My goal is to takes real-world map/streets and create custom roads, apply a way to navigate through my own roads along with existing streets in the world
After creating a new street, i exported the osm file, brought it to Maperitive to generate the tiles. i then make use of leaflet routing machine to do navigation through my new street in HTML. However, it seems to completely ignore what i have added. I am new into these software and cant seem to find what did i do wrong
Download from OSM into JOSM, created new street.
Exported as OSM, opened in Maperitive.
Export into Tiles, use Leaflet & Leaflet routing machine to try and route within the new street.
<link rel="stylesheet" href="Map Navigation/leaflet.css" />
<link rel="stylesheet" href="Map Navigation/leaflet-routing-machine-3.2.12/dist/leaflet-routing-machine.css" />
<script src="Map Navigation/leaflet.js"></script>
</head>
<body>
<div style="width: 1200px; height: 800px" id="map"></div>
<script type="text/javascript" src="Map Navigation/leaflet-src.js"></script>
<script src="Map Navigation/leaflet-routing-machine-3.2.12/dist/leaflet-routing-machine.js"></script>
<script>
var mymap = L.map('map').setView([1.269506, 103.832759], 13);
L.tileLayer('Map Navigation/Tiles/{z}/{x}/{y}.png', {maxZoom: 16}).addTo(mymap);
L.Routing.control({ waypoints:[
L.latLng(1.269506, 103.832759),
L.latLng(1.269542, 103.835772)],
routeWhileDragging: true
}).addTo(mymap);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
We are trying to save user generated markers to our leaflet map. We have the marker information (coordinates, name etc) all stored in our database. We know how to call database info and apply it to our page if it is plain text, but not as a marker to a map. Has anybody had experience with this?
sidenote: we are using pug and mongodb.
It does not sound any complicated to write inline JavaScript with pug:
How can I render inline JavaScript with Jade?
Docs: https://pugjs.org/language/plain-text.html#block-in-a-tag
Then follow the Leaflet tutorial to write the appropriate JavaScript to create Markers on a Map.
var map = L.map('map').setView([48.86, 2.35], 11);
L.marker([48.86, 2.35]).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>
You could translate in pug:
doctype html
html(lang="en")
head
link(rel='stylesheet', href='https://unpkg.com/leaflet#1.3.1/dist/leaflet.css')
script(src='https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js')
style.
#map {height: 180px;}
body
#map
script.
var map = L.map('map').setView([48.86, 2.35], 11);
L.marker([48.86, 2.35]).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Interpolation should also work within the script. block (e.g. L.map([#{lat}, #{lng}])), but you might prefer handling arrays / objects, in which case you need unescaped interpolation, with other tools to stringify.
See for example: https://github.com/pugjs/pug/issues/396
!{stringify(variable)}
pug.renderFile('template.pug', {stringify: require('js-stringify')});
(using js-stringify)
I'm doing a google map with custom symbols on locations provided by the client. Pasted below is a simplified version. When I set the path to the marker graphic .png in my own hard drive, and view the map in my own browser, everything works fine: The custom markers appear in the correct locations.
However, when I set the path to the marker .png in Dropbox, the marker does not appear on the map- neither with nor without the "?dl=0" suffix that Dropbox adds to the filename. I've also tried keeping the graphic on my Google Drive and pulling it from there; That didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
// locationsSC = locations in Service, Community Asset layer
var locationsSC = [
['Fish Emergency Services', 45.512388, -122.651950],
['Southeast Community Bike Fix-it Station', 45.512360, -122.634061],
['Southeast Kitchen Share', 45.508305, -122.637014],
['Southeast Tool Library', 45.508312, -122.637690],
['Southeast Uplift Neighborhood Coalition', 45.513445, -122.627480]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// adding Service, Community Asset markers
var markerSC, sc;
for (sc = 0; sc < locationsSC.length; sc++) {
markerSC = new google.maps.Marker({
position: new google.maps.LatLng(locationsSC[sc][1], locationsSC[sc][2]),
map: map,
icon: {
url: 'https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(markerSC, 'click', (function(markerSC, sc) {
return function() {
infowindow.setContent(locationsSC[sc][0]);
infowindow.open(map, markerSC);
}
})(markerSC, sc));
}
</script>
</body>
</html>
Is the problem in my code? Or is it Dropbox?
I'm just beginning to learn JavaAcript; Most of the code is snippets copied (by typing) from various tutorials.
I have no qualms about pasting the actual file path in the code here. That file location is going to be public anyway. If anyone can think of a good reason I shouldn't do this, feel free to say so- and why.
Above all, thanks in advance.
https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png isn't a link to an image. It's a link to a web page that (among other things) shows you the image.
To get a link to the image itself, try https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png?raw=1. For more details, see https://www.dropbox.com/help/201.