I want to remove the roads from an OSM map which I am displaying with Leaflet in an AngularJs app.
This question says that roads can't be removed, but that one can use a layer provider which has background images with no roads.
It even gives an example in R - but, alas, I don't know R.
Given that I declare my map thus in AngularJs:
const map = L.map('map').setView([51.178882, -1.826215], 16);
Self.map = map;
const osmUrl = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>";
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© ' + osmUrl,
maxZoom: 18,
}).addTo(map);
how do I change the title provider to Esri.WorldShadedRelief? Preferably in such a way that I can toggle tile providers when the user clicks a button.
Just use a different tile provider (check here for Esri.WorldShadedRelief) and use also the example on one of leaflet' s tutorials to change the tile providers using a L.control. Here is how it looks like in vanilla leaflet since I do not know how you have structured your angularjs project but I am pretty sure it can be adjusted easily.
<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</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="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var OpenStreetMap_Mapnik = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var Esri_WorldShadedRelief = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}';
var openstreet = L.tileLayer(OpenStreetMap_Mapnik, {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
});
var esri = L.tileLayer(Esri_WorldShadedRelief, {
attribution: 'Tiles © Esri — Source: Esri',
maxZoom: 13
});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [openstreet, esri]
});
var baseLayers = {
"OpenStreetMap_Mapnik": openstreet,
"Esri_WorldShadedRelief": esri
};
var overlays = {
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
Related
There is no built-in option for a 'green-marker' in the image property of the IconOptions.
How do I go about implementing one?
https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.iconoptions?view=azure-maps-typescript-latest
You will have to add an image to the map image sprite. There are templates for all the built in icons and more as shown here: https://azuremapscodesamples.azurewebsites.net/?sample=All%20built-in%20icon%20templates%20as%20symbols
You can load a template into the map and display it in a symbol layer as shown in this sample: https://azuremapscodesamples.azurewebsites.net/?sample=Symbol%20layer%20with%20built-in%20icon%20template
Here is sample that uses the "marker" icon template, and gives it a green color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Symbol layer with built-in icon template - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script type='text/javascript'>
var map, datasource;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source to add your data to.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a point to the center of the map.
datasource.add(new atlas.data.Point([0, 0]));
//Create an icon from one of the built-in templates and use it with a symbol layer.
map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker', 'green', '#fff').then(function () {
//Add a symbol layer that uses the custom created icon.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'myTemplatedIcon'
}
}));
});
});
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;height:600px;"></div>
</body>
</html>
I'm new with Mapbox and Leaflet and after checking out the leaflet-directive and Mapbox documentation I can get example maps to work but now when I integrate the two and use the URL I must work with, http://a.tiles.mapbox.com/v3/myMap.map-12341234.html for example.
This should be simple enough however I'm having an issue where the map is white.
my HTML looks like
<leaflet tiles="tiles"defaults="defaults"></leaflet>
and the js
angular.extend($scope, {
// tiles: 'http://a.tiles.mapbox.com/v3/myMap.map-12341234.html',
tiles: 'myMap.map-12341234',
defaults: {
scrollWheelZoom: false
}
});
})
how can I embed a url like my http://a.tiles.mapbox.com/v3/myMap.map-12341234.html
I'm not sure I understand you correctly, Are you just trying to use leaflet with your custom Mapbox style? If that is the case, heres a example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/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 = '<your access token here>';
// Replace 'mapbox.streets' with your map id.
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/myMap.map-12341234/{z}/{x}/{y}.png?access_token=' + L.mapbox.accessToken, {
attribution: '© Mapbox © OpenStreetMap'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([42.3610, -71.0587], 15);
</script>
</body>
</html>
Hope this helps you out!
I am new to angular-leaflet-directive.
I want to have a context menu when i right click on a marker.
I couldn't find any examples in angular way.
Can anyone please guide to achieve it.
Is that functionality exists in angular-leaflet-directive ?, because I couldn't find anything about in the documentation.
first download required files for angular context menu from this link
here is the example,
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<script src=" leaflet.contextmenu-src"></script>
<link rel="stylesheet" href="leaflet.contextmenu.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MarkersSimpleController', ['$scope', function($scope) {
$scope.showCoordinates = function(e) {
alert(e.latlng);
}
var mainMarker = {
lat: 51,
lng: 0,
focus: true,
draggable: true,
message: "hey marker",
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{
text: 'Show coordinates',
callback: $scope.showCoordinates
}]
};
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 8
},
markers: {
mainMarker: angular.copy(mainMarker)
},
position: {
lat: 51,
lng: 0
},
events: { // or just {} //all events
markers: {
enable: ['dragend']
//logic: 'emit'
}
}
});
$scope.$on("leafletDirectiveMarker.dragend", function(event, args) {
$scope.position.lat = args.model.lat;
$scope.position.lng = args.model.lng;
});
}]);
</script>
</head>
<body ng-controller="MarkersSimpleController">
<!-- <leaflet lf-center="london" markers="markers" height="480px" width="100%"></leaflet> EVENTS WILL STILL FIRE but all will for each directive-->
<!-- NOTICE events attribute is optional it is more for options in whitelisting (enable), blacklisting (disable), and logic (emit or broadcast) -->
<leaflet lf-center="london" event-broadcast="events" markers="markers" height="480px" width="100%"></leaflet>
<h1>Markers simple example</h1>
<p>Initial marker position (lat/lng): <strong ng-bind="markers.mainMarker.lat"></strong> / <strong ng-bind="markers.mainMarker.lng"></strong></p>
<p>Actual marker position (lat/lng): <strong ng-bind="position.lat"></strong> / <strong ng-bind="position.lng"></strong></p>
</p>
</body>
</html>
Plunker link for the same
I want to use map tiles offline. The tiles are made with Maperitive. This is the HTML with leaflet JS:
<!DOCTYPE HTML>
<html>
<head>
<title>map - test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- leafletjs -->
<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 {
margin: 0;
padding: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
<script>
var map = L.map('map', {
maxZoom: 18,
minZoom: 16,
maxBounds: [
//south west
[47.918760313911896, 9.25198432059355],
//north east
[47.929235549307315, 9.26072925925386]
],
}).setView([47.923997931609605, 9.2563567899237054], 17);
L.tileLayer('../img/tiles/{z}/{x}/{y}.png', {
tms: true // Do I need that?
}) .addTo(map);
L.marker([47.92458, 9.25630]) .addTo(map);
</script>
</div>
</body>
</html>
The code works offline on my computer but non online on my server. The folder with the tiles is stored on the server. The path to the tiles is correct.
What is my fault?
I found the reason.
It´s not the code. The tile-PNGs caused a 403 error. I rendered the tiles with Maperitive on a Windows 8 computer. Then I transferred them to a Mac. From there I put them on the server via ftp.
Now I transferred the tiles directly from the Windows to the server. And all is ok.
What happens between the Windows and the Mac that corruptes the PNGs?
I am using openlayers 3 (http://openlayers.org/) and i am trying to load an osm file in my map. In the old version of openlayers this task is very simple (http://wiki.openstreetmap.org/wiki/OpenLayers_osm_file_example) but now using openlayers 3 i cannot do a similar thing.
Any suggestion?
A Simple "OpenLayers 3" (Open Street Maps) Example
If you are trying to use OpenLayers 3 you might try using the https://openlayers.org/en/latest/doc/quickstart.html example it works locally really well and is fairly simple JavaScript.
OpenLayers (Open Street Maps)
uses the following two files in the code...
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/build/ol.js"></script>
<link rel="stylesheet"
href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/css/ol.css">
https://openlayers.org/en/latest/doc/quickstart.html
Here is the code from the above example if you need to test it out locally on your computer.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>