I'm using leaflet js and lantmateriet api for displaying map. But the map displaying empty white tiles in the browser. Map displaying fine with other api's like OSM. Im getting problem with lantmateriet api. This is my code.
var mapOptions = {
center: [59.4022, 13.5115],
zoom: 4
}
var map = new L.map('map', mapOptions);
L.tileLayer('https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/apikey/1.0.0/topowebb/default/3006/{z}/{y}/{x}.png', {
attribution: ''
}).addTo(map);
var marker = L.marker([59.3293, 18.0686]).addTo(map);
var m2 = L.marker([59.9139, 10.7522]).addTo(map);
m2.bindPopup("Oslo").addTo(map);
marker.bindPopup('Stockholm').addTo(map);
var latlngs = [
[59.9139, 10.7522],
[59.4022, 13.5115],
[59.3293, 18.0686]
];
var polyline = L.polyline(latlngs, {
color: 'red'
});
polyline.addTo(map);
var circleCenter = [59.4022, 13.5115]; // Center of the circle
var circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
}
// Creating a circle
var circle = L.circle(circleCenter, 10000, circleOptions);
circle.addTo(map); // Adding circle to the map
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</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>
</head>
<body>
<div id="map" style="width: 900px; height: 580px"></div>
</body>
</html>
Please help me to solve this problem. Thanks in advance.
It seems you have a problem with authentication to lantmateriet (all requests get a 401 return code), I didn't see anywhere a token for authentication.
I think you have to check that first.
I want to insert google maps into my wordpress site.
Because I want circles on my map I can't use plugins which insert the map for me.
So I want to use the code from this site Maps JavaScript API which should work I think.
I copied the code and inserted it on my page into an editor which can show js and html.
I also get a browser key, replaced the code at the specified place and confirmed my domain.
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&signed_in=true&callback=initMap">
But nothing show up at the page. No error, no maps, no empty space.
Now I thought that the reason could be that I don't add any version.
(If no version is added usually automatically the experimental version is used)
But nevertheless I tried it with v=3 which should be the release version.
src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">
And now I get the errors NoApiKeys, InvalidVersion and MissingKeyMapError.
But why ? The version should be valid and my key as well.
I made many different tutorials and stuff like that but nothing works.
Did anyone knows what to change to get this work?
Here is the whole code, but it is the same like that on the google page.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
newyork: {
center: {lat: 40.714, lng: -74.005},
population: 8405837
},
losangeles: {
center: {lat: 34.052, lng: -118.243},
population: 3857799
},
vancouver: {
center: {lat: 49.25, lng: -123.1},
population: 603502
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">
</script>
I would be happy if everyone who "dislikes" this will write a short comment why.
I tried to ask good questions and if something is missing or wrong I will change it.
i would debug probably by first listing only simple map thus skipping all this code below
// Construct the circle for each value in citymap.
it will help me to pinpoint which code is creating issue and then will take on from there.
I'm building a geofencing api with google maps api v3. I started from MapToolbar code :
http://nettique.free.fr/gmap/toolbar.html
I like it because it's really easy to customize like changing the icons and all the way the functions are called. I only use the polygon tool and I don't like the fact that you can't make convex angle when you add a point (only when you edit it after).
You can do it if you use drawingManager tools because the polygon is created only after you have completed the drawing :
https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
But I don't like the default icons and I think the way the functions are called is not really user friendly. The thing is that I'm not able to call the functions by myself.
So, I'm looking for a way to start drawing without using the default drawing control as simple as calling the right function but I can't find it! Or maybe I can create polygons the same way without using drawingManager at all. Please help me!
I found it! If you want to hide the control menu, use drawingControl: false and if you want to change the drawing mode, use setDrawingMode() as explained here:
https://developers.google.com/maps/documentation/javascript/reference#DrawingManager
So, this is the new code starting in polygon drawing mode:
<!DOCTYPE html>
<html>
<head>
<title>Drawing tools</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<script>
// ColorLuminance() is a little extra to have your strokeColor
// darker than your fillColor
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
polygonOptions: {
strokeWeight: 2,
strokeColor: ColorLuminance("#FF0000", -0.6),
strokeOpacity: 0.9,
fillColor: "#FF0000",
fillOpacity: 0.3
}
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I have created two markers on a map, one a standard marker, the other using an SVG path. The standard marker does not move relative to the map when I zoom out, but the SVG marker does. Here is a fiddle where you can see what I mean:
http://jsfiddle.net/9A4ET/
Any thoughts on how to get the SVG marker to hold its place relative to the map?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Marker Moves</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var islandLoc = new google.maps.LatLng(48.692492,-122.908192);
var birdLoc = new google.maps.LatLng(48.692615936699596, -122.90869625529479);
var map = new google.maps.Map(document.getElementById('map_canvas'),{
zoom: 19,
center: islandLoc,
disableDefaultUI: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var island_marker = new google.maps.Marker({
position: islandLoc,
map: map
});
var bird_icon = {
path: "m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z",
fillColor: '#000000',
strokeColor: '#FFFFFF',
fillOpacity: 1,
strokeWeight: 1,
scale:.15
}
var bird_marker = new google.maps.Marker({
position: birdLoc,
map: map,
icon: bird_icon
});
</script>
</body>
</html>
You must define the anchor for the symbol(for a symbol the default is the top left corner, while default for a image is the bottom center)
For this specific symbol the Point for a bottom center anchor would be approximately 258,381
Demo: http://jsfiddle.net/a3LKP/5/
Explanation of the calculation of the origin at bottom center(for inkscape).
Let's assume you didn't create the path(symbol) on your own, create a SVG-document with the given path:
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0">
<g>
<path d="m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z"/>
</g>
</svg>
Open this document with inkscape.
First go to File->document-properties->page to determine the document-height(for me it's 1052.36px , I guess that's the default)
Then click on the symbol to select it, in the menubar you should see the properties of the object: X , Y , W(idth), (H)eight.
For me it's now:
document-height: 1052.36
object-x: 130.909
object-y: 671.362
object-width: 254.155
object-height: 286.093
calculating the y of the bottom :
substract the object-y from the document-height(1052-671=381)
calculating the x of the center :
add the half of the objects width to the objects x(131+(254/2)=258)
So the anchor is new google.maps.Point(258,381)