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.
Related
I'm new in js. So I installed node.js.
What I have: I have html file which opens a map in the browser. When user right click it should create txt file and write 'Learning how to write in a file' in it, but it doesn't.
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_fc81479c2a8c4f18ad55baf3c9ba4285 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
</head>
<body>
<div class="folium-map" id="map_fc81479c2a8c4f18ad55baf3c9ba4285" ></div>
</body>
<script>
var map_fc81479c2a8c4f18ad55baf3c9ba4285 = L.map(
"map_fc81479c2a8c4f18ad55baf3c9ba4285",
{
center: [55.02111, 73.40751],
crs: L.CRS.EPSG3857,
zoom: 13,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_216c8662dc00405dba72c81174fd5845 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_fc81479c2a8c4f18ad55baf3c9ba4285);
var lat, lng;
map_fc81479c2a8c4f18ad55baf3c9ba4285.addEventListener('mousemove', function(ev) {
lat = ev.latlng.lat;
lng = ev.latlng.lng;
});
document.getElementById("map_fc81479c2a8c4f18ad55baf3c9ba4285").addEventListener("contextmenu", function (event) {
// Prevent the browser's context menu from appearing
event.preventDefault();
alert(lat + ' - ' + lng);
return false; // To disable default popup.
});
// Trying to save to text file
// !!!
// !!!
// !!!
// does not work :
const fs = require('fs')
let data = "Learning how to write in a file."
fs.writeFile('Output.txt', data, (err) => {
if (err) throw err;
})
</script>
and if I open console in the browser it shows me:
85 raw : const fs = require('fs')
But if I run code which should create a file in a separate js file - it creates good.
What should I do for it to create file when user right click on a map?
Edit 1:
Added script and still does not work
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js">
</script>
JavaScript is a browser based language for web. You cannot do anything outside the browser environment. Browsers don't give acess to the file system and other modules.
This is the issue that Node js solved. If you want to acess file system using javascript, I'll suggest to create an express web app using Node as backend allowing you to write into files and much more.
Feel free to Google Node and Express you'll get many examples online.
Hope this helps...
When we are initializing the map, we set the baselayer to "reduced.day".
We are currently facing a problem, when the user changes the map type from "map-view" to "satellite" and back to "map-view", the tile changed to the standard and not "reduced.day".
I have looked up the docs, but can´t find any hint on how to prevent that problem.
So my question is, how to set with the UI controls the map-view tiles to reduced day.
Thanks a lot.
I finally could achieve the solution for my problem.
The solution was to pass a custom object with the requested map style for each map type.
See below the complete code for editing the map controls.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Here Custom Controlls</title>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"
></script>
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css"
/>
</head>
<body>
<div id="map" style="height: 800px; width: 800px;"></div>
<script type="text/javascript" charset="utf-8">
//Initialize the Platform object:
const platform = new H.service.Platform({
app_id: {YOUR_APP_ID},
app_code: {YOUR_APP_CODE}
});
// Get the default map types from the Platform object:
const defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
const map = new H.Map(
document.getElementById("map"),
defaultLayers.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
}
);
const mapTileService = platform.getMapTileService({ type: "base" });
var reduce = mapTileService.createTileLayer(
"maptile",
"reduced.day",
256,
"png8"
);
map.setBaseLayer(reduce);
// Create the custom UI:
const ui = H.ui.UI.createDefault(
map,
{
...defaultLayers,
normal: {
map: reduce
}
},
"de-DE"
);
</script>
</body>
</html>
Please see two javascript functions codes.
SatelliteLayer will work with type : 'aerial'.
ReducedLayer will work with type : 'base'.
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setAerialSatelliteLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'aerial'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'satellite.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setBaseReducedLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'base'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'reduced.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
var map;
var service;
var index = 0;
var posArray = [];
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(init);
});
function init(location) {
enable();
googleMap();
var currentLocation = {lat: location.coords.latitude, lng: location.coords.longitude};
var mapOptions = {
center: currentLocation,
zoom: 10,
mapTypeId: google.maps.MapTypeId.READMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
service = new google.maps.places.PlacesService(map);
google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
<link rel="stylesheet" th:href="#{/style.css}"/>
<link rel="stylesheet" th:href="#{/bootstrap.css}"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}&libraries=places"></script>
<script type="text/javascript" th:src="#{/jquery.js}"></script>
<script type="text/javascript" th:src="#{/client.js}"></script>
</head>
I am currently have trouble loading my libraries=places into my google maps api. The api will let me either use the key OR libraries=places but not both. The error shows:
"Exception parsing document: template="index", line 10 - column 134"
line 10 is
script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}&libraries=places"
column 134 is the "=" between libraries and places.
Any suggestions would be welcome.
Can you try blow is updated;
<script type="text/javascript" th:src="#{https://maps.googleapis.com/maps/api/js(key='MY_KEY',libraries=places)}"></script>
I was able to get it to work with the following code:
<script type="text/javascript" th:src="#{https://maps.googleapis.com/maps/api/js(libraries=places, key=MY_KEY)}"></script>
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); %>;
Can anyone solve this code?
i have some javascript code geolocation and here map script, i want to put geolocation coordinate in here map script..
here bellow my code..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.css" />
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="getLocation()">My Location</button><br/>
<input type="text" id="latpos" name="latpos">
<input type="text" id="longpos" name="longpos">
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var origlat= position.coords.latitude ;
var origlong= position.coords.longitude ;
var lat=document.getElementById("latpos");
lat.value=origlat;
var lon=document.getElementById("longpos");
lon.value=origlong;
}
function addMarkerAndSetViewBounds(map) {
var latitu="-6.811408423530006";
var longitu= "110.85068956017494";
var origl= origlat;
var origlo= origlong;
var Isone = new H.map.Marker({lat:latitu, lng:longitu}),
geol = new H.map.Marker({lat:origl, lng:origlo}),
group = new H.map.Group();
group.addObjects([Isone , geol]);
map.addObject(group);
// get geo bounding box for the group and set it to the map
map.setViewBounds(group.getBounds());
}
/Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: false,
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:50, lng:5},
zoom: 15
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
addMarkerAndSetViewBounds(map);
</script>
</body>
</html>
but, that code didn't work fine..
how to get value var origlat and var origlong in variable var origl and var origlo?
can anyone help me to fix this code run correctly
You should make origlat, origlong global variables, instead of local variable.
http://www.w3schools.com/js/js_scope.asp