In AngularJS, the id attribute from my HTML Template isn't recognized by my javascript.
For example :
index.html file :
<div ng-controller="SubwayMapController">
<div subway-map></div>
</div>
scripts.js file :
app.directive('subwayMap', function () {
return {
templateUrl: 'Views/subway-map.html'
};
});
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(2.35,48.85).transform( fromProjection, toProjection); //Paris
var zoom = 12;
map.addLayer(mapnik);
map.setCenter(position, zoom );
subway-map.html file :
<div id="basicMap"></div>
When I open index page, I expect the map from Openstreetmap to be displayed but nothing happens.
Try setting up the map in the link() function of the directive. Plus, it looks like you can Map.render() using a DOMElement instead of needing an ID.
app.directive('subwayMap', function () {
return {
templateUrl: 'Views/subway-map.html',
link: function(scope, element) {
var map = new OpenLayers.Map();
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(2.35,48.85)
.transform(fromProjection, toProjection);
var zoom = 12;
map.addLayer(mapnik);
map.setCenter(position, zoom );
map.render(element[0]);
}
};
});
put map access code in setTimeout. You are trying to access the map immediately . Angular ain't done with map rendering yet , so setTimeout is the solution.
$timeout(function(){
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(2.35,48.85).transform( fromProjection, toProjection); //Paris
var zoom = 12;
map.addLayer(mapnik);
map.setCenter(position, zoom );
},10);
Related
I have a world map in my web application, powered by Amcharts4. I want to add a marker on the map, displaying the user's geolocation (using the HTML5 getCurrentPosition function. But the map is already generated while the coordinates are retrieved, how to push a new marker to the map after it has been drawn?
I have working versions of both the Amcharts map, including markers on the map, and of the geolocation function.
Geolocation works asynchronously, the script continues while the location is retrieved, so the map is generated in the meantime.
I'm not a big fan of waiting for the coordinates to be found before continuing, as this might imply a multiple seconds delay.
Essentially I am looking for functionality to push marker data to my Amcharts object after that object is displayed.
This is my js for the map:
// Themes begin
am4core.useTheme(am4themes_animated);
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Series for World map
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
worldSeries.exclude = ["AQ"];
worldSeries.useGeodata = true;
worldSeries.data = mapdata;
var polygonTemplate = worldSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{text}";
polygonTemplate.adapter.add("tooltipText", function(text, ev) {
if (!ev.dataItem.dataContext.text) {
return "{name}";
}
return text;
})
polygonTemplate.fill = chart.colors.getIndex(0);
polygonTemplate.nonScalingStroke = true;
polygonTemplate.propertyFields.fill = "fill";
polygonTemplate.properties.fill = am4core.color("#dddddd");
chart.zoomControl = new am4maps.ZoomControl();
// Hover state
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#333");
// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#000");
circle.stroke = am4core.color("#FFFFFF");
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = "{title}";
// Set property fields
imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";
// Add data for the three cities
imageSeries.data = [{
"latitude": 51.561678,
"longitude": 5.049685,
"title": "Rural Spark HQ"
}];
if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }
function showPosition(position) {
clientlocation = ({"latitude": position.coords.latitude, "longitude": position.coords.longitude, "title": "I am here!"});
console.log(clientlocation)
//push this clientlocation data to the map somehow?
}
I can see the client location in the console, but I didn't find any method to get it on the map.
You just can add the new object (clientlocation) to imageSeries.data:
imageSeries.addData(clientlocation);
Or you can just add the data by reassigning the data field:
imageSeries.data = [...imageSeries.data, clientlocation];
Here is a code pen as reference.
I create a car use THREE.ExtrudeGeometry, and following is my code :
function setExtMaterial(drawFunc,options,meshMaterial){
var geom = new THREE.ExtrudeGeometry(drawFunc(),options);
var shape = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);
return shape;
}
function drawShap1(){
var shape = new THREE.Shape();
shape.moveTo(10,10);
shape.splineThru([
new THREE.Vector2(10.2,11.8),
new THREE.Vector2(12,12)
])
shape.lineTo(18,12);
shape.splineThru([
new THREE.Vector2(19.8,11.8),
new THREE.Vector2(20,10)
])
shape.lineTo(20,4);
shape.lineTo(10,4);
shape.lineTo(10,10);
return shape;
}
var options1 = {
amount:25,
bevelThickness:1,
bevelSize:1,
beveSegments:60,
steps:60,
curveSegments:60
}
var mesh2 = new THREE.MeshPhongMaterial({
color:new THREE.Color('#FAF808')
});
var carBody = setExtMaterial(drawShap1,options1,mesh2);
carBody.position.set(-10,-3,15);
carBody.rotation.y = Math.PI/2;
car.add(carBody);
console.log(carBody)
Now I use console.log('carBody') to see what print ,and result is:
Group {uuid: "896051F5-8F4E-43C8-8EFE-B9FC4A07B7DE", name: "", type:
"Group", parent: Object3D, children: Array1…}
The carBody is Group ?!
And now I use subtract():
function subtract(obj1,obj2,mesh,target){
var o1BSP = new ThreeBSP(obj1);
var o2BSP = new ThreeBSP(obj2);
var r = o1BSP.subtract(o2BSP);
var result = r.toMesh(mesh);
result.geometry.computeFaceNormals();
result.geometry.computeVertexNormals();
target.add(result);
}
var windowFront = new THREE.Mesh(new THREE.CubeGeometry(1,5,9),mesh1);
windowFront.position.set(16,6,0);
subtract(carBody,windowFront,mesh2,car);
And when I use threeBSP's subtract() chrome point out this information:
And I look at ThreeBSP.js's code ,it seems that just Geometry and Mesh can use subtract() to create like this door:
How to use subtract() on the element that we create with THREE.ExtrudeGeometry. Any help is greatly appreciated.
I have a problem with OpenLayers. If I want to change the icon of some marker on the fly (for instance, to paint the marker with another color to indicate a status change), the marker starts behaving buggy, not showing in the proper place and even leaving semi-randomly located copies of itself, noticeable when zooming the map in or out.
I already realized that the problem happens when I reassign the marker.icon attribute, from some pre-loaded icon images which work fine otherwise. I have tried both with and without using icon.clone() to redraw.
Here's a full but simplified example which moves the marker randomly and should modify its icon too. If you comment out the "troublesome code" snippet, it works well, except for the icon change:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Mapa</TITLE>
<SCRIPT language="javascript" type="text/javascript" src="OpenLayers.js"></SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
var vMapa;
var prj0 = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var prj1 = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var vLon = 12.568142;
var vLat = 55.676320;
var vTimer = null;
var vCont = 0;
</SCRIPT>
</HEAD>
<BODY onClose="vTimer = null; vLon = null; vLat = null;">
<DIV id="demoMap" style="height: 700px; width: 1000px;"></DIV><DIV id="Contador">0</DIV>
<SCRIPT>
var options = {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
]
};
vMapa = new OpenLayers.Map("demoMap", options);
vMapa.addLayer(new OpenLayers.Layer.OSM());
vMapa.setCenter(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), 15, false, false);
var Navigation = new OpenLayers.Control.Navigation( { defaultDblClick: function(event) { return; } } );
vMapa.addControl(Navigation);
var markers = new OpenLayers.Layer.Markers("Markers");
vMapa.addLayer(markers);
var size = new OpenLayers.Size(12, 12);
var offset = new OpenLayers.Pixel(-6, -6);
var iconOff = new OpenLayers.Icon('img/CircOff.png', size, offset);
var iconOn = new OpenLayers.Icon('img/CircOn.png', size, offset);
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), iconOff.clone());
marker.setOpacity(1.0);
marker.events.register('mousedown', marker, function(evt) { vMapa.panTo(marker.lonlat); OpenLayers.Event.stop(evt); });
marker.pfInfo = 'Vel: 0.0 km/h';
markers.addMarker(marker);
vTimer = setTimeout('TimerEvent()', 1000);
function TimerEvent() {
vLon += ((Math.random() - 0.5) / 500);
vLat += ((Math.random() - 0.5) / 500);
// ------- Troublesome code -------
var ixIcon = Math.round(Math.random());
if (ixIcon == 0) {
marker.icon = iconOff.clone();
} else {
marker.icon = iconOn.clone();
}
// --------------------------------
var newLonLat = new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1);
var newPx = marker.map.getLayerPxFromViewPortPx(marker.map.getPixelFromLonLat(newLonLat));
marker.moveTo(newPx);
marker.draw();
vCont ++;
document.getElementById('Contador').innerHTML = vCont;
vTimer = setTimeout('TimerEvent()', 1000);
}
</SCRIPT>
</BODY>
</HTML>
Thanks a lot in advance for your suggestions.
I never use Marker to create markers.
I create a Vector layer, and add Point objects. Then style these Points.
This works much better and has more functionality.
You can create a restful web service which can return an SVG as a string. The parameters passed would tell the service what has to change on the icon. The service would read in a template SVG change it appropriately and return it.
I am drawing polygon from existing lonlats. But it is showing in very very smaller size.
Code is as follows,
for(var i in coordinates) {
point = new OpenLayers.Geometry.Point(coordinates.lon,coordinates.lat);
point.transform(new OpenLayers.projection("EPSG:4326"),map.getProjectionObject());
points.push(point);
}
points.push(points[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(points);
var polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing]),null,{strokeColor:"black",
fillColor:"orange",sides:4});
newLayer.addFeatures([polygonFeature]);
newLayer.redraw(true);
But it is displaying in very very small size .
How to show in bigger size? Any help?
The point.transform() not change point object itself, it returns new point,so:
also here is no index (i) used in loop, plus here was syntax error (new OpenLayers.projection should be new OpenLayers.Projection
for(var i in coordinates) {
point = new OpenLayers.Geometry.Point(coordinates[i].lon,coordinates[i].lat);
points.push(
point.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
)
);
}
points.push(points[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(points);
var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]),null,{
strokeColor:"black",
fillColor:"orange",
});
newLayer.addFeatures([polygonFeature]);
newLayer.redraw(true);
working sample - note a pretty big orange rectangle in africa
This is my GeoJSON result. PasteBin
But when I load it, the result I get in firebug is feature is null. Why's that, are there any errors in my result? The coords in the JSON is written in projection WGS84, and in the code I also have set the externalProjection as WGS84. So why do I get the return "feature is null"?
The code I use to manage my map is :
$(document).ready(function() {
var wgs84 = new OpenLayers.Projection('EPSG:4326');
var layer = null;
var map = new OpenLayers.Map('map',{projection: wgs84});
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
var baseProjection = layer.projection;
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(10,10), 4);
map.events.register("moveend", null, function(){
if(map.zoom == 10)
{
var bounds = map.getExtent();
console.log(bounds);
var ne = new OpenLayers.LonLat(bounds.right,bounds.top).transform(map.getProjectionObject(),wgs84);
var sw = new OpenLayers.LonLat(bounds.left,bounds.bottom).transform(map.getProjectionObject(),wgs84);
var vectorLayer = new OpenLayers.Layer.Vector();
map.addLayer(vectorLayer);
$.getJSON('ajax.php?a=markers&type=json&sw=('+sw.lon+','+sw.lat+')&ne=('+ne.lon+','+ne.lat+')',function(data){
//$.getJSON('test.json',function(data){
var geojson_format = new OpenLayers.Format.GeoJSON({
'externalProjection': wgs84,
'internalProjection': baseProjection
});
vectorLayer.addFeatures(geojson_format.read(data));
});
}
});
});
Your sample OpenLayer code is working correctly, the problem is in your GeoJSON: you misspelled coordinates as "coordninates"