I am trying to implement a map view that shows either online or offline tiles using the LeafletJS library for Europe (Zoom level 6 & 7).
I've generated the offline map tiles using a program called Mobile Atlas Creator 2.0.0 beta 1 using these settings:
When the atlas is generated, it creates a zip file containing the folder MapQuest with several sub folders and tile images.
So, I have downloaded the leaflet JS library version 0.7.7 from http://leafletjs.com/ and extracted into the following dir structure along with the offline map tiles:
Here are the contents of my index.html
<!DOCTYPE html>
<html>
<head>
<title>Europe Zoom Level 6 & 7</title>
<link rel="stylesheet" type="text/css" href="leaflet.css">
<script type="text/javascript" src="leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
(function () {
// Objects
var isOnline = true;
var map = L.map('map').setView([51.505, -0.09], 6);;
// Generate tile layer url
var tileLayerUrl = isOnline
? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
: 'MapQuest/{z}/{x}/{y}.jpg';
// Set tile layer & set to map
L.tileLayer(tileLayerUrl, {
minZoom : 6,
maxZoom : 7,
attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
})();
</script>
</body>
</html>
I tried running this in offline mode as well as online mode to no avail; I am just getting a blank page. There are no errors in console.
Any ideas what I might be doing wrong here?
Okay, I have figured it out. The issue was caused by not setting custom styles to control height.
Here's the fixed working version:
<!doctype html>
<html lang="en">
<head>
<title>Europe Zoom Level 6 & 7</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="leaflet.css">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map { height: 100% }
</style>
<script type="text/javascript" src="leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
(function () {
// Objects
var isOnline = false;
var map = L.map('map').setView([51.505, -0.09], 6);;
// Generate tile layer url
var tileLayerUrl = isOnline
? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
: 'MapQuest/{z}/{x}/{y}.jpg';
// Set tile layer & add to map
L.tileLayer(tileLayerUrl, {
minZoom : 6,
maxZoom : 7,
attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
})
.addTo(map);
})();
</script>
</body>
</html>
Related
I'm trying to use the ArcGIS JavaScript API to build some interactive web maps. However, using the code found on the official documentation throws an error every time. I have a working API key, ommitted in the example below, of course.
Is there something I'm missing?
Error:
Exception has occurred.
Object
Code:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
esriConfig.apiKey = "YOUR_KEY_HERE";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
const view = new MapView({
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
The following JS script (CSS/HTML included for completeness) is intended to open the leaflet map tiles and mark the user location. While it opens the map, it doesn't mark the user location. Why not?
<!DOCTYPE html>
<html>
<head>
<title>Leaflet GeoLocation</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([43, -79], 18);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA',
maxZoom: 18
}).addTo(map);
var newMarker = new L.marker(e.latlng).addTo(map);
</script>
</body>
</html>
You are not trying to get the user location at any point in this code.
This line :
var newMarker = new L.marker(e.latlng).addTo(map);
e is not defined in the code you provide. So you need to give it a latitude/longitude value.
I've created a HTML file which displays a map using leaflet following this tutorial.
http://build-failed.blogspot.co.uk/2012/11/zoomable-image-with-leaflet.html
My HTML code is as follows...
<!DOCTYPE html>
<html>
<head>
<title>eso1119a</title>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script>
function init() {
var mapMinZoom = 0;
var mapMaxZoom = 3;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 1280], mapMaxZoom),
map.unproject([1280, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with MapTiler',
noWrap: true
}).addTo(map);
}
</script>
<style>
html, body, #map { width:100%; height:100%; margin:0; padding:0; }
</style>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
How can I embedd the map onto my blog (tumblr) in the same way this user has? http://blog.thematicmapping.org/2013/06/showing-zoomify-images-with-leaflet.html
You need to upload the folder with the zoomable image generated by MapTiler to a webhosting.
Tutorials for how to make it are available - hosting is possible for free with Dropbox, or with other services:
http://www.maptiler.com/how-to/hosting/
(A different web-hosting provider for the map is required as Tumblr does not support static files hosting anymore..).
After you do this then just create a new post in Tumblr, change for the post the "Text editor" and choose "HTML" and include a code like:
<iframe src="http://yourserver.com/path-to-your-folder/leaflet.html"
style="width: 100%; height: 450px;"></iframe>
See this Thumblr sample post:
http://klokancz.tumblr.com/post/129075897775/maptiler-embedding-test
I´m using leaflet on meteor but its only showing a blank (grey) map without displaying the map tiles. when I test the script locally in a single html file its working.
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
test
<div id="map" style="height: 180px;"></div>
123
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("some text :)");
</script>
</body>
</html>
but its not working when I try to do it in meteor.
my meteor setup:
I have a main.html where I declare some CDNs:
<head>
<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css"/>
</head>
I also use iron:router to route. so there is a map.html with a map template where I only have my
<div id="map"></div>
I also have setup my #map{height: 180px;} in my stylesheet.
So now I have to run the script with some javascript with my Template.map.rendered function
Template.map.rendered = function () {
var map = L.map('map').setView([51.505, -0.09], 13);
L.Icon.Default.imagePath = "/images/leaflet/";
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("some text :)");
};
But it will not work. What is causing the blank map error? my browser console is not showing any error.
ok I figured out what was the problem. I have a reset.css where I have some reset rules for my UI.
this line was producing the error:
div, a, p, img, blockquote, form, fieldset, textarea, input, label, iframe, code, pre {
some stuff,
some stuff,
overflow:hidden; <---------
}
so it looks like leaflet don´t like divs with overflow:hidden option
I'm creating a map in TileMill which shows the age of various buildings by color. I have 4 data layers (each with 50 years of building construction, so it can be toggled on/off) and a base layer.
Within TileMill I can see tooltips when I hover over the shapefiles. I've customized them so it shows the age of construction of the building the cursor is hovering over. However when I export to MBTiles to upload to MapBox for integration on my website, the hover functionality is gone, and there is no legend.
I have searched for hours for help on MapBox's website and API. I am not using Markers so I cannot use that as a solution (there are over 800,000 buildings). Is there any way to do this?
var map = L.mapbox.map('map', 'jacobs74.xoonovka', {
legendControl: {
// any of the valid control positions:
// http://leafletjs.com/reference.html#control-positions
position: 'bottomleft'
}, zoomControl: false
})
.setView([41.8928, -87.6491], 14),
markerLayer = L.mapbox.markerLayer().addTo(map);
map.gridControl.options.follow = true;
new L.Control.Zoom({ position: 'topright' }).addTo(map);
var gridLayer = L.mapbox.gridLayer('jacobs74.xoonovka');
map.addLayer(gridLayer);
map.addControl(L.mapbox.gridControl(gridLayer, {follow: true}));
L.control.layers({
}, {
'Thru 1899': L.mapbox.tileLayer('jacobs74.s37bpdgq'),
'1900-1949': L.mapbox.tileLayer('jacobs74.fi084ush'),
'1950-1999': L.mapbox.tileLayer('jacobs74.yh8prbfi'),
'2000-Now': L.mapbox.tileLayer('jacobs74.awsw2ji1')
}).addTo(map);
It's a bit unclear where your issue is. Please include a copy of your code. As for creating a tooltip for tile as well as marker layers. Just set the follow option to true map.gridControl
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Movetip</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.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>
var map = L.mapbox.map('map', 'examples.map-8ced9urs');
map.gridControl.options.follow = true;
</script>
</body>
</html>