Currently working on an app (map) where I would like to use the Tom Tom tile layers on top of Leaflet. Due to Leaflet's documentation I would like to stick to Leaflet, rather than Tom Tom. I was successful at setting up the map using the Tom Tom approach, but I couldnt get the tile layer to be added using the leaflet library.
I cant see what Im doing wrong. Could anyone help please?
According to the leaflet tutorial the code should work like this: https://leafletjs.com/examples/quick-start/
The Tom Tom tile map API url can be generated from: https://developer.tomtom.com/content/maps-api-explorer#/Vector/get_map__versionNumber__tile__layer___style___zoom___X___Y__pbf
`
// Creating a map instance with its center set to London with a zoom of 13
var mymap = L.map('map').setView([51.505, -0.09], 13);
// Accessing the tile layer from the TOMTOM site
L.tileLayer('https://api.tomtom.com/map/1/tile/basic/main/1/0/0.pbf?key=MY_API_KEY', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
//id: 'mapbox.streets',
//accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap css and scripts -->
<link rel="stylesheet" href="./00_Local_Bootstrap\css\bootstrap.css">
<script src="./00_Local_Bootstrap\js\bootstrap.js"></script>
<script src="./00_Local_Bootstrap\jquery_3_4_1\jquery_3_4_1.js"></script>
<!-- Leaflet css and scripts -->
<link rel="stylesheet" type="text/css" href="./Leaflet\leaflet.css" />
<script src="./Leaflet\leaflet.js"></script>
<style media="screen">
#map {
width: 50vw;
height: 50vh;
}
</style>
</head>
<body>
<!-- Map Import-->
<div class="container">
<p>Here is the map</p>
<div id='map'></div>
<!-- Mymap script -->
<script src="./welcome_page_leaflet.js"></script>
</div>
</body>
</html>
`
The leaflet documentation is using Mapbox, which is why they refer to the corresponding access token and id. Thats why I commented it out.
The map doesnt load the tiles and I only get a blank screen where the map should be. What am I missing?
Looks like you are trying to display vector tiles (with PBF extension) through Leaflet Tile Layer, which is meant for raster tiles.
Tom Tom provides raster tiles as well: https://developer.tomtom.com/maps-api/maps-api-documentation-raster/raster-tile
Related
Is there a ready-made maidenhead grid overlay for Leaflet? If not, how to create it?
There isn't one, so I created my own: Leaflet.Maidenhead.
So with a bit of HTML like
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.maidenhead#1.0.0/src/maidenhead.js"></script>
and then a bit of javascript like
L.maidenhead({precision: 6}).addTo(map)
you should be able to have something that looks like
The leaflet map binds to the two geojson files just fine locally, but it does not render when I upload the document to github. The leaflet base map loads fine.
I tried the solution listed here: Leaflet with GitHub Pages - not rendering
But it had no apparent effect.
Thanks!
I figured it out - the leaflet scripts were in HTTPS, but the jquery was not. I updated it and it works great!
Before:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
After:
<link rel="stylesheet" href="https://npmcdn.com/leaflet#1.0.0-rc.2/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet#1.0.0-rc.2/dist/leaflet.js"></script>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
I tried using this example http://openlayers.org/en/master/examples/mapbox-vector-tiles.html
And it works well.
I have now styled my own map in Mapbox studio online.
I am not able to add my styled map in this example because there is a style function createMapboxStreetsV6Style() in the example which I am not able to get for my styles.
Any idea how I can add my styles mapbox vector map to openlayers 3?
Any help would be appreciated.
This is now possible using ol-mapbox-style.
I've recently found an issue, however, it should not stop you from using this awesome package. I'm sure the maintainers will address that issue in no time.
Depending on what you are using the map for, you can replace Openlayers for Mapbox-GL-JS as the maps will be much more fluid and better performing overall. Here's an example to get you started if you're interested.
Otherwise, I'll point you to one of the help guides on Mapbox.com that walks through the steps to style a tile map and use it in Openlayers 3.0.
Hope this helps
EDIT: A better example to work off as an example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapBox Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js"></script>
<link url="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.css">
</head>
<body>
<div id="map"></div>
</body>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
tileSize: [512, 512],
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=Your access token here'
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
and lastly CSS:
body { margin:0; padding:0; }
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
I searched for this topic but could not find any other instances. I am attempting to add KML layers using leaflet-omnivore to my Mapbox map, but each time the map loads, the basemap works but the KML layers (which should be in the same extent) do not load. The HTML document and the KML layers are hosted on the same domain. I am new to using leaflet-omnivore, and wondered if I am doing something wrong? The coordinate system for the KML also is WGS84, so I don't see how that could be the issue, either. I've basically copy and pasted the code from the example and am running that, other than substituting my own URL for the example, as well as adjusting the map basemap, extent, and key.
Any help or insight appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>KML Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'deleted for post';
var map = L.mapbox.map('map','mapbox.light').setView([41.5, -72.67], 9);
// omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The file must either be on the same domain as the page that requests it,
// or both the server it is requested from and the user's browser must
// support CORS.
// Internally this uses the toGeoJSON library to decode the KML file
// into GeoJSON
var runLayer = omnivore.kml('http://magic.lib.uconn.edu/magic_2/vector/apindex_37800_0000_1934_s12_FAS_1_shp_wgs84.kml')
.on('ready', function() {
map.fitBounds(runLayer.getBounds());
})
.addTo(map);
</script>
</body>
</html>
Your icons aren't defined correctly. It looks like you might have not converted the URL when you decompressed the KMZ.
<Style id="IconStyle00">
<IconStyle>
<scale>0.25</scale>
<Icon>
<href>df080276-b1b3-4280-bf72-a57bb8c4960e.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>00000000</color>
<scale>0</scale>
</LabelStyle>
<PolyStyle>
<color>ff000000</color>
<outline>0</outline>
</PolyStyle>
</Style>
If I add a url to an icon, I see them show up on the map, but it does take a while to render.
This KML file is 14mb - loading this with AJAX into a Leaflet map isn't the best approach, because it'll take a long time to load and be slow once it's on the map. Your best bet would be to bring this data into a tool like TileMill or CartoDB to generate tiles from it, and put those on a map.
I'm very new to this and learning as I go so please be patient!
I have a geoJSON file, which I have successfully (manually) imported into Mapbox / Leaflet.
However, rather than doing it manually, I would like to load the geojson file automatically. I have tried using the following code, where the file ('crimeReportSummary.geojson') is saved in the same directory as my Index.html file.
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/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.eyJ1Ijoic3RldmVyZCIsImEiOiJ5T0hIMGU4In0.iRYeTkjtats3I4b2ZCBZVw';
var map = L.mapbox.map('map', 'steverd.l9nc6o7n')
var featLayer = L.mapbox.featureLayer().addTo(map);
featLayer.loadURL('crimeReportSummary.geojson');
</script>
</body>
</html>
My problem is, when I run this code, the map appears correctly, but none of the markers appear.
I would be really grateful if someone could advise me how to do this! I am a noob, so simple explanations are appreciated. I have spent hours today trying to figure this out, but without luck. Thanks so much in advance for your time.
Edit - the geoJSON file I'm using can be found here