I'm newbie, I'm reading in internet the possibilities of openstreetmap, and also I read about openlayers...What I need, for begin, is obtain the location and create the corresponding map...I found a good example with openlayers, this is the code:
<html>
<head>
<title>HTML5 geolocation with Openstreetmap and OpenLayers</title>
<style type="text/css">
html, body, #basicMap {
width: 240;
height: 320;
margin: 10;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById('anzeige').innerHTML="Latitude: " + position.coords.latitude + " Longitude: " +
position.coords.longitude + "<p>";
var lonLat = new OpenLayers.LonLat(position.coords.longitude,
position.coords.latitude)
.transform(
new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
map.getProjectionObject() //to Spherical Mercator Projection
);
markers.addMarker(new OpenLayers.Marker(lonLat));
map.setCenter(lonLat, 14 // Zoom level
);
});
//map = new OpenLayers.Map("basicMap");
//var mapnik = new OpenLayers.Layer.OSM();
//map.addLayer(mapnik);
map.setCenter(new
OpenLayers.LonLat(3,3) // Center of the map
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
), 15 // Zoom level
);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
}
</script>
</head>
<body onload="init();">
<center>
HTML5 geolocation:
<br>
<div id="basicMap"></div>
<br>HTML5 geolocation<br>
<br>with Openstreetmap and OpenLayers<br>
For Android Froyo,iPhone,iPAD,iPod
<br>
Your position estimated by browser geolocation API:<p>
<div id="anzeige">(will be displayed here)<p></div>
Andreas Bischoff
<br>(view source to see how it works
</center>
</body>
</html>
You can see a live example here: http://www.pediaphon.org/~bischoff/location_based_services/
Next step, I need draw a scretch line which displays the rute followed. Here is a live example of drawing lines (pressing shift + clicking on mouse): http://openlayers.org/dev/examples/draw-feature.html
But I'm new and I'm lost in how call api of openlayers in order to draw line from origin to destination...any help is welcome
Best regards.
EDIT:
I just copied this peace of code ( Drawing a path with a line in OpenLayers using JavaScript ) just before the tag, but I don't see the line drawn:
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
var points = new Array(
/*I put these coords of my city*/
new OpenLayers.Geometry.Point(-3.7904085, 37.76225609999999 ),
new OpenLayers.Geometry.Point(-4.7904085, 39.76225609999999 )
);
var line = new OpenLayers.Geometry.LineString(points);
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
lineLayer.addFeatures([lineFeature]);
Related
Three js
I want cubeTextureLoader cube map background. but it doesn't work and showing nothing only white background and my object, But I want 3d background. It gives me error like this one-
"Access to image at 'file:///C:/Users/Mili%20Murmu/Documents/Arena_web/Mili/ThreeJs/Bts_music-player/images/posx.jpg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.".
second error -
"Failed to load resource: net::ERR_FAILED".
I don't understand why isn't showing any cube map background? Please help me! How can I solve this?
const scene = new THREE.Scene();
//light
const light = new THREE.PointLight(0xffffff, 1)
light.position.set(2000, 2000, 1500);
scene.add(light);
const ambientlight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientlight);
//set up camera
// Set up camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.3, 10000)
camera.position.set(1300, 0, 0);
function onWindowResize() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
windowHalfX = WIDTH / 2;
windowHalfY = HEIGHT / 2;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
}
// renderer
//set up renderer
const renderer = new THREE.WebGLRenderer({antialias : true, alpha : true});
renderer.setSize(window.innerWidth - 8, window.innerHeight - 8) ;
renderer.render(scene, camera);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor("#803855");
renderer.shadowMapEnabled = true;
const container = document.getElementById('world');
container.appendChild(renderer.domElement);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls( camera, renderer.domElement);
const group = new THREE.Group();
scene.add(group);
const imgLoc = "https://eyes.nasa.gov/apps/exo/assets/image/exoplanet/";
const geometry = new THREE.SphereGeometry (500, 32, 32);
const material = new THREE.MeshPhongMaterial();
const planet = new THREE.Mesh(geometry, material);
group.add(planet);
const starGeometry = new THREE.BoxGeometry(20, 20, 20);
const starMaterial = new THREE.MeshBasicMaterial( );
const starsphere = new THREE.Mesh(starGeometry, starMaterial );
scene.add(starsphere);
let loader = new THREE.TextureLoader();
material.map = loader.load(imgLoc+'GJ_504_b.jpg');
material.bumpMap = loader.load(imgLoc+'GJ_504_b.jpg');
material.bumpScale = 8;
material.specular = new THREE.Color('#000000');
var textureCubeLoader = new THREE.CubeTextureLoader();
var path = 'images/';
var textureCube = textureCubeLoader.load( [ path + 'posx.jpg' , path + 'negx.jpg', path + 'posy.jpg' , path + 'negy.jpg', path + 'posz.jpg' , path + 'negz.jpg' ] );
scene.background = textureCube;
const animate = () => {
requestAnimationFrame(animate);
planet.rotation.y += 0.001;
renderer.render(scene, camera);
};
animate();
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
#world{
margin: 0;
padding: 0;
}
<html>
<head>
<meta charset="utf-8">
<title>BTS_Music Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
</head>
<body>
<div id="world"></div>
<script src="js/main.js"></script>
</body>
</html>
I'm trying to create a Leaflet map, that automatically adds markers and polylines between destinations from a Google sheet.
I've managed to set up a map from other examples which is linked to my Google Sheet. You see the example here:
<!DOCTYPE html>
<html>
<head>
<script src='//cdn.jsdelivr.net/npm/tabletop#1.5.2/src/tabletop.min.js'></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" />
<script src="//unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<style>
#map-div {
position: absolute;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map-div"></div>
</body>
</html>
var map = L.map('map-div').setView([60.1682653, 24.9422078], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Basemap (c) OpenStreetMap',
minZoom: 5,
maxZoom: 100
});
basemap.addTo(map);
function addPoints(data, tabletop) {
for (var row in data) {
var marker = L.marker([
data[row].Latitude,
data[row].Longitude
]).addTo(map);
marker.bindPopup('<strong>' + data[row].Info + '</strong>');
}
}
function init() {
Tabletop.init({
key: 'https://docs.google.com/spreadsheets/d/1Rs6xPlJ8pU4UFfmokjATaf4dArMWxQxZcyS-xRIIFuY/edit?usp=sharing',
callback: addPoints,
simpleSheet: true
})
}
init()
https://jsfiddle.net/Enounce/kwvn5e6z/12/
But unfortunately, I don't have the skills to make the map do what I want:
Draw lines between markers Draw lines between markers in leaflet
Zoom to fit all markers Zoom to Fit All Markers on LeafletJS Map
If possible, add an overview of all destinations, much like the directions panel in Google Maps. I haven't been able to find examples of this though.
I'm unsure if this is at all possible with the destinations being in an external source. Any help is appreciated!
Draw Line between markers:
You need to create a L.Polyline and add the latlngs to it:
function addPoints(data, tabletop) {
var line = L.polyline([]).addTo(map);
for (var row in data) {
var marker = L.marker([
data[row].Latitude,
data[row].Longitude
]).addTo(map);
line.addLatLng(marker.getLatLng());
marker.bindPopup('<strong>' + data[row].Info + '</strong>');
}
}
Zoom to fit all markers:
Add the markers to a L.FeatureGroup() and then you can fit the map bounds to the group bounds with map.fitBounds(fg.getBounds());
var fg = L.featureGroup().addTo(map);
function addPoints(data, tabletop) {
var line = L.polyline([]).addTo(map);
for (var row in data) {
var marker = L.marker([
data[row].Latitude,
data[row].Longitude
]).addTo(fg);
line.addLatLng(marker.getLatLng());
marker.bindPopup('<strong>' + data[row].Info + '</strong>');
}
map.fitBounds(fg.getBounds());
}
BUT you need to remove minZoom: 5 from the TileLayer.
Destinations
Store the destinations in an array and then create a html element in the loop and add a click listener:
var destinationHTML = document.getElementById("destinations-body");
var fg = L.featureGroup().addTo(map);
var destinations = [];
function addPoints(data, tabletop) {
var line = L.polyline([]).addTo(map);
for (var row in data) {
var marker = L.marker([
data[row].Latitude,
data[row].Longitude
]).addTo(fg);
line.addLatLng(marker.getLatLng());
marker.bindPopup('<strong>' + data[row].Info + '</strong>');
destinations.push({
marker,
data: data[row],
id: row
});
destinationHTML.innerHTML += "<div class='destination-elm' onclick='destinationClick(\""+row+"\")'><span>"+data[row].Info+"</span></div>"
}
map.fitBounds(fg.getBounds());
}
function destinationClick(id){
console.log(id)
destinations.forEach(function(obj){
if(obj.id == id){
map.panTo(obj.marker.getLatLng());
}
})
}
Example: https://jsfiddle.net/falkedesign/k3b4nups/
When using a stock chart, I am using the comparisonMode with a date. The value displayed by the crosshair is correct, but the value in the tooltip is the real value (not compared). How could I display the compared value instead?
As you can see on the picture, the compared value is 107.1 but the tooltip is displaying the actual value 893.5. I am using anychart 8.0.0
I'm glad to inform you that in the new version of AnyStock 8.1.0 the calculated change value is available right from the point information. It may be used in tooltips and legends. I guess this is exactly what you were looking for.
The example of using this feature you may find on this link.
Now the context of every point includes valueChange and valuePercentChange properties.
This feature requires a few additional lines of JS code, I prepared an example below to show how it works. Now compared value is shown in cross-hair label, in the tooltip, and in legend.
anychart.onDocumentReady(function() {
var dataTable = anychart.data.table();
dataTable.addData(get_dji_daily_short_data());
var firstMapping = dataTable.mapAs({'value': 1});
var secondMapping = dataTable.mapAs({'value': 3});
chart = anychart.stock();
var plot = chart.plot();
var series0 = plot.line(firstMapping);
var series1 = plot.line(secondMapping);
var yScale = plot.yScale();
// Set comparison mode.
yScale.comparisonMode("value");
var xScale = chart.xScale();
chart.container("container");
chart.draw();
//reference points of both series
var firstVisibleValue0 = null;
var firstVisibleValue1 = null;
//after chart rendering format tooltip and legend
getVisibleValues();
tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1);
//after every scroll change recalculate reference points
//and reformat tooltip and legend
chart.scroller().listen('scrollerchange', function() {
getVisibleValues();
tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1);
});
function getVisibleValues() {
// Gets scale minimum.
var minimum = xScale.getMinimum();
//select data from mappings
var selectable0 = firstMapping.createSelectable();
var selectable1 = secondMapping.createSelectable();
// Sets value for search.
var select0 = selectable0.search(minimum, "nearest");
var select1 = selectable1.search(minimum, "nearest");
// get values in first visible points
firstVisibleValue0 = select0.get('value');
firstVisibleValue1 = select1.get('value');
}
function tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1) {
//format tooltips and legends of both series
series0.tooltip().format(function () {
return 'Series 0: ' + Math.round(this.value - firstVisibleValue0);
});
series0.legendItem().format(function(){
return 'Series 0: ' + Math.round(this.value - firstVisibleValue0);
});
series1.tooltip().format(function () {
return 'Series 1: ' + Math.round(this.value - firstVisibleValue1);
});
series1.legendItem().format(function(){
return 'Series 1: ' + Math.round(this.value - firstVisibleValue1);
});
}
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-stock.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/csv-data/dji-daily-short.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css" />
<div id="container"></div>
I've created a tile set of an image using MapTiler. MapTiler generates a OL 2 script that centers the tiled image in the viewing window with the following code:
var map, layer;
var mapBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000);
var mapMinZoom = 0;
var mapMaxZoom = 6;
var mapMaxResolution = 1.000000;
var gridBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000);
function init() {
var options = {
controls: [],
maxExtent : gridBounds,
minResolution: mapMaxResolution,
numZoomLevels: mapMaxZoom+1
};
map = new OpenLayers.Map('map', options);
layer = new OpenLayers.Layer.XYZ( "MapTiler layer", "${z}/${x}/${y}.png", {
transitionEffect: 'resize',
tileSize: new OpenLayers.Size(256, 256),
tileOrigin: new OpenLayers.LonLat(gridBounds.left, gridBounds.top)
});
map.addLayer(layer);
map.zoomToExtent(mapBounds);
I want to use OL3 to display the tiled map but do not know how to implement equivalent OL3 methods to achieve this. Using the following script I can display the tiled image but I cannot figure out how to center the tiles to in the view.
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: map_path + '{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
I've inspected the map extent which turns out to be:
-20037508.342789244,-20037508.342789244,20037508.342789244,20037508.342789244
My tiled image extent is given in the OL2 code, but I don't known how to use this information in OL3. I think it might have something to do with a transformation or fitExtent but without further direction, it seems I'm just guessing at what to do.
You will have to create a pixel projection for this to work properly. Then you can use fit (replacement for the former fitExtent), as you already suspected, to zoom to the full extent of the image.
The whole OpenLayers 2 code translated to OpenLayers 3 would look like this:
var mapBounds = [0.000000, -9350.000000, 14450.000000, 0.000000];
var mapMaxZoom = 6;
var gridBounds = [0.000000, -9350.000000, 14450.000000, 0.000000];
var projection = new ol.proj.Projection({
code: 'pixels',
units: 'pixels',
extent: gridBounds
});
var map = new ol.Map({
target: 'map',
view: new ol.View({
extent: mapBounds,
projection: projection
})
});
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: '{z}/{x}/{y}.png',
projection: projection,
maxZoom: mapMaxZoom
})
});
map.addLayer(layer);
map.getView().fit(mapBounds, map.getSize());
I jus started learn ruby on rails and currently I am creating my first rails app. And I ran into some problems. In my app, I would like to get user's position (latitude, longitude). So I can put the button "find me" and return user's locations. But I would like to load my page and show my position (latitude, longitude), don't press any buttons. And then use lat and lng in my controllers. How can I do this?
Add the below script in your view page.You may go ahead and modify this as needed as to show/customise messages and buttons.Remember to have a dedicated div with id="map-canvas" to show you map on the page.
I have used geocomplete.js to show map and allow user to enter places from search box .You may remove the scripts using geocomplete if not needed.
<script type="text/javascript">
// Enable the visual refresh
// google.maps.visualRefresh = true;
var map;
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: '<p>You are here!</p>'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}//initialize ends
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = '<p>Unable to find the current location</p>';
} else {
var content = '<p Your browser doesn\'t support geolocation.</p>';
}
var options = {
map: map,
zoom: 5,
position: new google.maps.LatLng(60, 105),
content: content
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(60, 105),
map: map,
animation: google.maps.Animation.DROP,
title: 'Sorry,we were unable to find your location'
});
marker.setAnimation(google.maps.Animation.BOUNCE);
var infowindow = new google.maps.InfoWindow(options);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
map.setCenter(options.position);
}//handleNoGeolocation ends
//load the page and execute above scripts
$(document).ready(function(){
$('#map-canvas').html("<p class='text-center text-alert'>Loading map...</p>").show(3000);
//load the map after 2 seconds
setTimeout('initialize()', 3000);
// $("#geocomplete").geocomplete({
// map: ".map-canvas-guest"
// });
//you may use this or remove this section using geocomplete.js if not needed.
$("#geocomplete").geocomplete();
$("#geocomplete").geocomplete(mapOptions).bind("geocode:result", function(event, result){
console.log(result.formatted_address);
//use this user entered address and you may call ajax here as well
})
})//document ends
</script>