I am using a .svg file for plotting India map. It is displaying India map as desired.
Now I want to display circles on this map using latitude and longitude.
How can I draw circles by using places array? Any source code and web link would be appreciated.
My index.html code is as like below and the svg file I am using is here.
The final output of my script is here.
** Please also guide me, is this the correct way of displaying map?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="d3.v3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var places = [
{
name: "GUNA",
location: {
latitude: 24.5429,
longitude: 77.1032
}
},
{
name: "THE DANGS",
location: {
latitude: 20.4633,
longitude: 73.4646
}
}
]
d3.xml("toilet.svg", function(xml) {
var x = document.importNode(xml.documentElement, true);
document.body.appendChild(x)
});
</script>
</body>
</html>
Related
I have a tiny application with three files in the same dir:
main.js
python_script.py
index.html
In main.js:
var platform = new H.service.Platform({
'apikey': {my API key}
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lng: 17.0, lat: 51.0 }
});
window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
ui.getControl('zoom').setDisabled(false)
function addWroclove() {
var markerWroclaw = new H.map.Marker({ lat: 51.0, lng: 17.0 }, { icon: icon });
map.addObject(markerWroclaw);
}
addWroclove();
In python_script.py:
import requests
URL_wro = "https://places.ls.hereapi.com/places/v1/browse?at=17.0%2C51.0&q=Wroclaw&apiKey=MY_API_KEY"
wro = requests.get(URL_wro)
print(wro.text)
index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="description" content=""/>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" >window.ENV_VARIABLE = 'https://developer.here.com'</script>
<script src='https://developer.here.com/javascript/src/iframeheight.js'></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
</head>
<body>
<div class="map" id="mapContainer"></div>
</body>
</html>
My question is:
when I am trying to send GET query (in python_script.py) I am receiving data but from HERE server and not from map which is on my own remote server.
I mean - I want to have a GET's response from map in which i have declared my own marker (markerWroclaw).
How to make it works in a proper way?
The browse endpoint will give you places from the HERE server. If you want to call locations that you add on the go, you will need to use the Custom Location API. While you add the location as a marker, you will also have to add it to your custom layer. From there you will be able to call and parse the layer of your custom locations.
As an example, below is the layer of custom POIs that I have uploaded to my map layer.
NAME WKT
POINT1 POINT(13.402449957770752 52.505308544760155)
POINT2 POINT(13.408663845393365 52.499911895880146)
This can be uploaded using the call below
curl --request -i -X POST
-H "Content-Type: multipart/form-data"
-F "zipfile=#my_folder/my_layer_content.zip"
"https://fleet.ls.hereapi.com/2/layers/upload.json
?layer_id=POIS
&apiKey={YOUR_API_KEY}"
or this web tool.
Once uploaded, you can use this call to retrieve the points in the layer:
https://fleet.ls.hereapi.com/2/search/all.json?apikey={SameAPIKeyUsedToUpload}&layer_id=POIS
You can also perform a bunch of search functions with this layer.
I am trying to pass value of latitude to the a-frame component as defined below. I am unable to do so. Please help. It seems trivial, I am new to Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Component Add</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="js/aframe.min.js"></script>
<script src="js/three.js"></script>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position){
var Latitude = position.coords.latitude;
var Longitude = position.coords.longitude;
var arr = [Latitude, Longitude];
return arr;
}
// Store returned value in a variable
var all = showPosition(position);
// Displaying individual values
console.log(all[0]);
AFRAME.registerComponent('log', {
schema: {
message: {type: 'number', default: all[0]},
},
init: function () {
console.log(this.data.message);
}
});
</script>
<a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" log="">
<!-- <a-sky src="MonValley_A_LookoutPoint_8k.jpg"></a-sky>-->
<a-assets>
<img id="sky" src="img/mon.jpg">
</a-assets>
<a-sky src="#sky" material="" geometry="" ></a-sky>
<div class="a-loader-title" style="display: none;">Hello, WebVR! • A-Frame</div>
</a-scene>
</body>
</html>
In the debugger it shows a message TypeError:position is undefined
I‘m running a code to plot the marker according to their coordination on leaflet after I getJSON from mysql database,
but the system continue getting error as 'Uncaught TypeError: Cannot read property '1' of undefined'.Code is presented below
<html>
<head>
<title>A Leaflet map</title>
<link rel="stylesheet"
href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin=""/>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js?ver=1.10.2'></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>
<div id="map"></div>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<script type="text/javascript">
var markerArray = [];
// initialize the map
var map = L.map('map').setView([40.730610, -73.935242], 11.5);
// load a tile layer
L.tileLayer('https://cartodb-basemaps{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',{
attribution: '© <a href=" ">OpenStreetMap</a > © <a href="http://cartodb.com/attributions">CartoDB</a >',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
var url= "http://dev.spatialdatacapture.org:8827/airbnb";
console.log(url);
$.getJSON( url, function(data){
$.each(data, function(k,v){
//var latLng = new google.maps.LatLng(v.points.y, v.points.x);
var lng = v.longitude;
var lat = v.latitude;
var marker = {
"type":'Feature',
"properties":
{
"id":v.id,
"host_id":v.host_id,
"host_listings_count":v.host_listings_count,
"property_type":v.property_type,
"room_type":v.room_type,
"price":v.price,
"review_scores_rating":v.review_scores_rating,
"review_scores_accuracy":v.review_scores_accuracy,
"review_scores_cleaness":v.review_scores_cleaness,
"review_scores_checkin":v.review_scores_checkin,
"review_scores_communication":v.review_scores_communication,
"review_scores_location":v.review_scores_location,
"review_scores_value":v.review_scores_value,
"NTACode":v.NTACode,
"NTAName":v.NTAName,
},
"geometry":{
"type":'Point',
"coordination" : [lng,lat]
}
};
markerArray.push(marker);
});
var geoj = {"type":"FeatureCollection","features": markerArray};
console.log(geoj);
L.geoJson(geoj,{
PointToLayer: function(feature,latlng){
returnL.circleMarker(latLng,geojsonMarkerOptions).on('mouseover',function(){
this.bindPopup("NTAName"+feature.properties.NTAName +"</div><div>"+"price"+feature.properties.price+"</div><div>"+"</div>").openPopup();
});
}
}).addTo(map);
});
</script>
</body>
</html>
Then I got error: Cannot read property '1' of undefined in leaflet.js
Does anyone know what should I do?
The GeoJSON format expects the key "coordinates" in geometry of features, instead of "coordination" in your code.
You can easily check the GeoJSON data that you build using online GeoJSON linting tools.
Furthermore you have 2 typos:
PointToLayer option should be pointToLayer (lowercase first letter)
returnL.circleMarker should be return L.circleMarker (whitespace between return return and circleMarker)
If that is not enough to remove the error, we would need more information from your side. Ideally share a reproduction example.
I am trying to use Google Maps API for my website with Node.js and mongodb. I have an express app on Node.js that fetches locations from mongodb. I have set up the map on my website. However, it is showing markers only for the locations hard coded in the Node.js code. Here, is the piece of code from routes.js
app.get('/website', function(req, res){
website.website(function(events){
res.render('website/index_page.ejs', {events : events});
});
});
The index_page.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<% include map_head %>
</head>
<body>
<h2>Events</h2>
<ol>
<%events.forEach(function(event){%>
<li><p><%= event %></p></li>
<%});%>
</ol>
<div id="googleMap" style="width:650px;height:700px;"></div>`
</body>
</html>`
And the map_head.ejs
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(10, 90),
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
events.forEach(function (event) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Number(event.latitude), Number(event.longitude)),
map: map,
title: "test"
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The events object is only known to the server and its ejs parser.
The client does not receive the events object in the code you provided.
It only receives an "ol" list.
Your could include the events object in map_head.ejs with code like this:
var events=<%- JSON.stringify(events); %>;
I'm very new to HTML and Javascript (less than a week of experience) and am stuck in the following situation. I created 6 google map visualizations using the googleVis package for R (simple stuff--just markers on a map). I've extracted the Javascript out of the googleVis objects in R and have included them in a simple site that contains 6 divs for each of the 6 different maps.
Each Javascript file includes a function to create a JSON object, a function to draw the map, and a function to display the map:
//define JSON
function gvisDataWest ()
{
var data = new google.visualization.DataTable();
var datajson =
[
[
33.5313,
-112.1774,
"<p>2005-2009 Poverty Rate: 40.7%</p> <p>2000 Poverty Rate: 34.3%</p> <p>Significant difference: 0.0 points </p>"
],
... many rows of data ...
];
data.addColumn('number','Latitude');
data.addColumn('number','Longitude');
data.addColumn('string','tip');
data.addRows(datajson);
return(data);
}
//draw chart
function drawChartWest() {
var data = gvisDataWest();
var options = {};
options["showTip"] = true;
options["enableScrollWheel"] = true;
options["width"] = 400;
var chart = new google.visualization.Map(
document.getElementById('West')
);
chart.draw(data,options);
}
//display chart
function displayChartWest()
{
google.load("visualization", "1", { packages:["map"] });
google.setOnLoadCallback(drawChartWest);
}
Each javascript file includes functions and data for a different region of the country (e.g. there would be definitions for gvisDataMidwest(), givsDataSouthEast(), etc.).
Here's roughly what my HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/xml; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="../povscripts/map1.js" type="text/javascript"></script>
<script src="../povscripts/map2.js" type="text/javascript"></script>
<script src="../povscripts/map3.js" type="text/javascript"></script>
<script src="../povscripts/map4.js" type="text/javascript"></script>
<script src="../povscripts/map5.js" type="text/javascript"></script>
<script src="../povscripts/map6.js" type="text/javascript"></script>
</head>
<body>
...a bunch of divs, headers, <p>'s, etc...
...then six divs like this, each with an appropriate id:
<div class="anncdiv">
<div class="bannertitle">
<p class="btxt">West</p>
</div>
<div class="anncdivIn" id="West">
<script type="text/javascript"> displayChartWest() </script>
</div>
</div>
<div class="anncdiv">
<div class="bannertitle">
<p class="btxt">Midwest</p>
</div>
<div class="anncdivIn" id="Midwest">
<script type="text/javascript"> displayChartMidwest() </script>
</div>
</div>
THE PROBLEM: With the way I've currently cobbled this site together, if there are two dsplayChart**() functions being called anywhere on the site (as in this example, with displayChartWest() and displayChartMidwest()) all divs appear blank. But, if I were to just include one of these function calls, then the map displays fine in the appropriate div. Somehow calling two or more of these functions results in a conflict, though I just don't know why. Your help is GREATLY appreciated. Cheers, AR
I think you might need to wait until the DOM is loaded before firing up your charts. Without using a library like jQuery, you could do it using the body onload event:
<body onload="displayCharts()">
...page source...
<script type="text/javascript">
function displayCharts() {
displayChartWest();
displayChartMidwest();
}
</script>
</body>
Instead of doing this:
google.load("visualization", "1", { packages:["map"] });
google.setOnLoadCallback(drawChartWest);
try this instead:
google.load("visualization", "1", { packages:["map"],callback: drawChartWest});