Google maps KML polygons - google-maps-api-3
I have successfully imported a kml file to a Google map so that it displays real estate boundaries.
I have also used the tutorial at https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays to draw simple polygons and have them click-able.
However, I don't know how to make the polygons created by the kml file click-able. The polygons on the kml are quite complex shapes and consist of many coordinates to form the polygons. The example below is just for 1 real estate boundary:
-83.6530304633209,34.8237504877659,0 -83.65536046332301,34.8248804877671,0 -83.65672046332431,34.8262904877683,0 -83.6567504633242,34.8271904877693,0 -83.655330463323,34.8308304877725,0 -83.6565104633242,34.8333304877749,0 -83.65765046332511,34.8349204877764,0 -83.6571104633247,34.8383604877794,0 -83.6591604633265,34.8443604877853,0 -83.6588104633263,34.8468904877875,0 -83.6591604633265,34.8507504877912,0 -83.6583904633258,34.8543804877945,0 -83.6569404633244,34.8566604877968,0 -83.65475046332242,34.8599504877998,0 -83.6545604633223,34.8610404878007,0 -83.6543204633219,34.8635704878032,0 -83.65568046332331,34.8684104878075,0 -83.6553904633231,34.8695004878086,0 -83.6546604633224,34.8706904878097,0 -83.654380463322,34.872050487811,0 -83.6552304633228,34.8745504878134,0 -83.65494046332262,34.8759104878145,0 -83.65377046332161,34.8768304878154,0 -83.6504704633185,34.8796104878179,0 -83.64877046331689,34.8814504878196,0 -83.6469204633151,34.8849204878229,0 -83.6450204633134,34.8870304878249,0 -83.64227046331081,34.8897904878275,0 -83.6389204633076,34.8911304878288,0 -83.6344604633034,34.8921304878297,0 -83.6330604633022,34.8926104878301,0 -83.6295204632988,34.8948504878322,0 -83.6278404632974,34.8969604878341,0 -83.6273304632969,34.89832048783551,0 -83.62726046329681,34.8994904878366,0 -83.6286904632982,34.9030704878399,0 -83.6287304632981,34.9045104878412,0 -83.62844046329791,34.9056004878421,0 -83.6268704632964,34.9077104878443,0 -83.6256904632953,34.9086304878451,0 -83.6240704632939,34.9091204878455,0 -83.6226304632926,34.9088804878452,0 -83.6204304632904,34.9083904878448,0 -83.6179704632882,34.9100604878463,0 -83.61680046328711,34.9109904878471,0 -83.6157204632862,34.9116404878477,0 -83.61126046328189,34.9123704878484,0 -83.610200463281,34.91347048784951,0
These coordinates do not work when i manually convert them into latlng pairs and insert them into the Google tutorial above like so:
new google.maps.LatLng(-83.6530304633209,34.8237504877659),
new google.maps.LatLng(83.65536046332301,34.8248804877671),
new google.maps.LatLng(-83.65672046332431,34.8262904877683),
new google.maps.LatLng(-83.6567504633242,34.8271904877693)
Anyone have any ideas on how I can either make the kml layer polygons click-able or use the kml data to redraw the polygons and make them click-able?
Thanks
edit: This is the code i'm using to load the kml:
<!-- Declare the application as HTML5 using the <!DOCTYPE html> declaration -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- include the Maps API JavaScript using a script tag -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaWOu7N4OX8BlYUwZhvWP2V0P6YQryN9Y&sensor=true"></script>
<script type="text/javascript">
function initialize()
{
<!-- create a JavaScript object literal to hold a number of map properties -->
var myOptions =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
fillColor: '#0000ff'
};
<!-- a JavaScript function to create a "map" object -->
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var myLayer = new google.maps.KmlLayer('http://www.domain.com/gmaps/1.kml',{suppressInfoWindows: true,map: map});
google.maps.event.addListener
(
myLayer,"mouseover",function()
{
this.setOptions({fillColor: "#000000"});
}
);
google.maps.event.addListener
(
myLayer, 'click', function(kmlEvent)
{
var text = kmlEvent.featureData.description;
showInContentWindow(text);
}
);
google.maps.event.addListener
(
myLayer,"mouseover",function()
{
this.setOptions
(
{
fillColor: "#000000"
}
);
}
);
function showInContentWindow(text)
{
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
}
</script>
</head>
<!-- initialize the map object from the body tag's onload event -->
<body onLoad="initialize()">
<!-- create a div element named "map_canvas" to hold the Map -->
<div id="map_canvas" style="width:79%; height:100%; float:left"></div>
<div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>
Unfortunately, you don't get a mouseover event with the KmlLayerapi-doc; check at the api-doc, scroll down a bit to see the Events, and all you get for events are: click, defaultviewport_changed, and status_changed. I have also explored the options that are available because the KmlLayer is an MVCObjectapi-doc, but that doesn't offer additional events. I don't think this is possible.
There may be another way to achieve what you want, but I haven't found it; let's see what others may be able to add.
Using KmlLayer, you can't change the properties of the Polygons. If you use a third party KML parser like geoxml3 or geoxml-v3 to render the polygons as native Google Maps API v3 objects you can change their properties (but whether the performance is acceptable will depend on how complex your KML is). You can also dynamically change Polygons in tiles rendered using FusionTablesLayer (import your KML into a Fusion Tabel).
Example changing the color of Polygons from KML rendered using geoxml3 on mouseover
Related
take a screenshot of a web map
I am just starting out with javascript and I am trying to create an interactive web map....
I want to be able to position the map then press a button that will take a screenshot and save it to the computer.
Here is the code for my map.....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '[TOKEN]';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/charlie-enright/cl5b8bjil002y14o5u8xrssah', // style URL
center: [-4.369240916438415, 51.925803756014965], // starting position [lng, lat]
zoom: 8, // starting zoom
projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
</script>
</body>
</html>
I have tried using html2canvas (https://codepen.io/samsammurphy/pen/VXdOPv) but the button seems to end up in a layer behind my map and I can not take a screenshot of the displayed map.
Any ideas how I could create a button that allows for a screenshot to be taken which saves to the computer will be greatly appreciated.
Thanks,
Here's an example of using map.getCanvas().toDataURL() and then injecting an img tag into the DOM. (This is not my example, I found it on this codepen by Sam Murphy https://codepen.io/samsammurphy/pen/VXdOPv)
$('button').click(function() {
var img = map.getCanvas().toDataURL();
var width = $('#screenshotPlaceholder').width()
var height = $('#screenshotPlaceholder').height()
var imgHTML = `<img src="${img}", width=${width}, height = ${height}/>`
$('#screenshotPlaceholder').empty();
$('#screenshotPlaceholder').append(imgHTML);
});
});
The codepen I found this on was not working due to an expired access token, so here's a fork that works if you want to try it out.
https://codepen.io/chriswhong/pen/YzapomG
Here's the code I use to take map screenshots using html2canvas
html2canvas(document.getElementById("map"), {useCORS:true}).then(canvas => {
var pseudolink = document.createElement('a');
pseudolink.download = 'myMapScreenshot.png';
pseudolink.href = canvas.toDataURL()
pseudolink.click();
})
scene api - getAframeElements
I have use floorplan conversion api to convert my 2d floorplan to 3d and get the sceneId back 71c8eef9-b44e-447f-a0d2-fd299318da56.
I want to convert it to afame component inside my aframe application.So I use getAframeElements and get two entity back and following your official sample:
const sceneEl = document.querySelector('a-scene')
io3d.scene.getAframeElements(sceneId)
.then(elements => {
// this will give us two elements
// The first is the actual scene according to the scene structure hierarchy
// The second is the camera with potential waypoints that where defined in the scene structure
// you can leverage the waypoints using our A-Frame tour component
elements.forEach((el) => {
// add elements to the scene
sceneEl.appendChild(el)
})
sceneEl.appendChild(element)
})
Then It added to aframe, but nothing happens! I got nothing.
Do I miss something?
Hard to tell what's going on there without the full HTML and JavaScript, but the full code to get that working is:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://3d.io/releases/3dio-js/1.x.x/3dio.min.js"></script>
</head>
<body>
<a-scene></a-scene>
<script>
io3d.scene.getAframeElements('71c8eef9-b44e-447f-a0d2-fd299318da56').then(elems => {
document.querySelector('a-scene').appendChild(elems[0])
})
</script>
</body>
</html>
And you can see it working at https://aspiring-snowman.glitch.me/
Adding KML Layer to Google Map embedded in a Blogger Page
I have a Blogger page with an embedded Google map which works fine. When I try to use Google's Javascript API to add a KML layer on top of the map the map becomes entirely black apart from the navigation controls. If I set the kml layer back to null the underlying map appears again.
I have tested the exact same code in a local environment and it works fine. So the issue is with embedding the code within a Blogger page.
Below is my html and js. Does anyone have any idea what the issue might be?
Note that the example kml file I'm using below is just a skeleton without any placemarkers, but I've tried it with other kmls and got the same result.
<html>
<head>
<style type="text/css">
#map-canvas {
height: 480px;
width: 500px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3" type="text/javascript"/>
<script type="text/javascript">
function initializeMap() {
var centre = new google.maps.LatLng(35.5906421,37.6945915);
var mapOptions = {
zoom: 3,
center: centre,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var layer = new google.maps.KmlLayer({
url: 'http://trackmytour.com/Dpxc9.kml',
preserveViewport: true
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initializeMap);
</script>
</head>
<body>
<p>
Here is where I'll be tracking my progress.<br>
<br>
<br>
</p>
<div id="map-canvas"/>
</body>
</html>
How to display a leaflet map in a single post in jekyll?
I'm trying to insert a map in a single post in Jekyll.
Here is the visible effort of my attempt to this: github link
Here is the link to the github's account itself: link
I took a default template, ie Hyde.
Then I added the Leaflet's CSS and JS files in the _includes/head.html
Then I created a post that relied on the _layouts/default.html (default draws from head.html)
As I said, I'm attempting to insert a single map in a single post. If you look at the first link, it shows the map all over the blog in a weird manner.
It doesn't show up in the single post itself.
How can I make this work?
I'm hoping to eventually have a series of posts each with their own map, if that's possible.
Here is the code in the solitary post that I have up so far:
---
layout: default
title: Trying to integrate map in jekyll
---
<div id="map">
</div>
<script>
var map = L.map('map').setView([34.00000, -118.260126], 14);
mapLink =
'OpenStreetMap'; L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © ' + mapLink, maxZoom: 18, }).addTo(map);
var marker = L.marker([34.063298, -118.260126]) .addTo(map).bindPopup("<b>Blah Blah Blah</b><br /><a href='http://www.cnn.com'>Additional Information</a><br />").openPopup();
</script>
I realize that this post relies a lot on links, and that's frowned up on here at SO. But I have no other way of explaining my problem.
Correct code in _includes/head.html is :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
not
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"></script>
and
<style type="text/css">
#map {
width:400px;
height:550px;
background-color: red;
}
</style>
not
<style type="text/css">
#map {
width:400px%;
height:550px;
background-color: red;
}
</style>
Google KmlLayer not displaying custom marker
I've written an R script to create a KML file and the resultant KML below loads icon18.png fine when viewed in Google Earth:
<kml xmlns:xsd="http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd" xmlns:xmlns="http://www.opengis.net/kml/2.2/" version="1.0">
<Document>
<name>Member locations</name>
<open>1</open>
<Folder>
<name>SpatialPointsDataFrame</name>
<Style id="pnt1">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal2/icon18.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text>$[description]</text>
</BalloonStyle>
</Style>
<Placemark>
<name>1</name>
<styleUrl>#pnt1</styleUrl>
<Point>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>151.26250,-33.89374,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>
However when loaded into a KmlLayer using the maps API and the following code it displays as the default blue 'teardrop' marker:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var ctaLayer = new google.maps.KmlLayer('http://www.peter-johnson.com.au/test.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Looking at other questions here I could only see ones posted without code that went unanswered or some related to the web server not being publically available.
A few indiciated there problem was now OK so I guess loading custom icons into a KmlLayer is supported but I have some problem with the KML format or the way I'm loading it?
As suggested in a comment I've just placed the KML in a publically available area here:
http://www.peter-johnson.com.au/test.kml
And here is the HTML:
http://www.peter-johnson.com.au/test.htm
The KML you have posted doesn't work with either Google Maps or KmlLayer even after I make it validate Your KML on Google Maps - Blue default marker Your KML on Google Maps API v3 map - Blue default marker For what it is worth, it does work with geoxml3 Your version does have an invalid schema (at least according to feedvalidator) UPDATE: The problem is with the location of the definition of the shared styles. This works and on Google Maps The Style definition didn't work where you had it. Shared styles look like they have to be in a Document.