I'm using the GeoServer to hold some maps, and just a simple OpenLayers app to load and show the data (for now).
I'm successfully loading the demo data (which is in WGS84), but when it comes to my data (which is in Balkans Zone 7, EPSG:31277), when I look at the request, it seems like the BBOX is completely out of order.
I checked the BBOX from the GeoServer preview page (which is made with openLayers) and it looks like this, and works:
http://127.0.0.1:2113/geoserver/GISHome/wms?LAYERS=GISHome%3ANis11Katastar&STYLES=&FORMAT=image%2Fjpeg&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&SRS=EPSG%3A31277&BBOX=7572000,4796000,7574000,4798000&WIDTH=512&HEIGHT=512
The only thing that's different with my request is the BBOX. When copying the BBOX into my request, it works.
http://127.0.0.1:2113/geoserver/wms?LAYERS=Nis11Katastar&FORMAT=image%2Fpng&WIDTH=256&HEIGHT=256&PROJECTION=EPSG%3A31277&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG%3A4326&BBOX=-180,-90,0,90
In the GeoServer source, the bounds are somehow calculated and hardcoded. The question is, how? Is there a way not to hardcode them? How should I calculate them. I've tried adding bounds, maxExtent, resolution, I'm obviously missing something more than that here. The GeoServer works fine, I'm using the layers from QuantumGIS.
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://127.0.0.1:2113/geoserver/wms",
{
LAYERS:'Nis11Katastar',
format: 'image/png',
width:600,
height:400,
projection: new OpenLayers.Projection("EPSG:31277"),
}
);
Thankyou.
Oh, yes, I'm using GeoExt, but that doesn't change much.
It seems solved. I was setting the right properties, but to the WMS layer object, not to the map object. As for the bounds question, I'm just copying the bounds from the geoserver control panel.
Related
I am working on this project where I want to add relatively dynamic data (updating every 15minutes) to a mapbox-gl via a serverless solution. I followed this excellent guide on creating serverless vector tiles and have the base tiles working.
My question is now how would you achieve adding a geojson point layer to the map (hosted on a simple HTML page), using something like:
var map = new mapboxgl.Map({
container: 'map',
style: style: "https://{domain}/bright.json",
});
var url = 'https://{domain}/geojsonfile.json'
map.addSource('geojsonfile', {
'type': 'geojson',
'data': url
});
map.addLayer({
'id': 'geojsonfile',
'type': 'symbol',
'source': 'geojsonfile',
'layout': {
'icon-image': 'rocket-15'
}
});
In a serverless vector environment without using Tippecanoe to convert the json file into protobuf vector tiles and instead adding the layer direct to the map from the javascript file. The above js for addsource and addlayer come from this Mapbox guide.
I can get the above js working when I pass in a mapboxgl.accessToken instead of self-hosting; however that's as far as I have been able to get. The geojson file is hosted in a CORS enabled s3 bucket.
Is the issue with loading in the source or displaying the layer? I have also tried modifying the bright.json file to handle the source and layer so that I only have to replace the s3 file, however have had no luck.
Any and all help / suggestions are much appreciated.
After quite a lot of blind trial and error, finally figured out a solution. Turns out my original script was trying to load the layer to the map on-load. However, the tile base load is configured via the style and tile files pre-load.
Therefore, the js addSource needs to be added to the map post-load and then style on-load.
this.map.on('style.load', function () {
this.pastInitialLoad = true;
this.map.addSource("geojsonfile", {
"type": "geojson",
"data": url }
);
If anyone else is stuck, these guides / sources were of great help!
https://schwanksta.com/blog/vector-tiles-introduction-pt1
http://fuzzytolerance.info/blog/2016/03/16/Leaflet-to-Mapbox-GL/
https://github.com/mapbox/mapbox-gl-js/issues/2268
I am trying to set up a system that loads a KMZ file and displays it using google maps and then tests if the user has clicked within the bounds of a polygon created by the KMZ. I have searched all through these forums and the web and haven't found a working solution.
I am having no problem loading and reading the KMZ file and the polygon is displaying perfectly on the map. But when I try to use the polygon data returned by geoXML3 to test if a location is within the bounds then I get a variety of errors depending on how I approach it.
I am loading the geoxml3.js files locally and the parser for the KMZ files, and as I say that works fine so I won't include all that.
The KMZ file is local to the server and reads fine.
This is what I have:
<script>
var zone;
var polzone;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 0, lng: 0}
});
zone = new geoXML3.parser({map: map});
zone.parse('test.kmz');
}
function testlimit(){
polzone = zone.docs[0].gpolygons[0];
console.log( google.maps.geometry.poly.containsLocation(new google.maps.LatLng("0", "0"), polzone));
}
</script>
As you can see I'm testing just with hard coded long and lattitude values and it's giving me the error "Uncaught TypeError: b.get is not a function".
The testlimit function is fired when a button is clicked.
I initially had more code but as it wasn't working, this is where I've ended up. Any help would be appreciated.
Alright, never mind then, Apparently the gpolygon variable is an array.
So it should be
polzone = zone.docs[0].gpolygons[0];
One of those days I should have stayed in bed I guess...
as title suggest, create Feature and add it to already created vector layer. I am fetching GeoJSON from server and trying to somehow add to vector layer but I can't get it to work... So basically I am asking how to get Feature element from my GeoJSON, so I can add it to vector layer.
What I currently have..
This is my GeoJSON fetched from server :
{"type":"MultiPolygon","coordinates":[[[[20.5629940201429,48.9488601183337],[20.5630121528311,48.9489447276126],[20.563289335522,48.9489141101973],[20.563260061873,48.9488286413488],[20.5629940201429,48.9488601183337]]]]}
next I have addVector function in JavaScript where I'm trying to the magic.(variable GeoJS is GeoJSON fetched from server)
function addVector(geoJS){
var feature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.MultiPolygon(geoJS) );
vector = new OpenLayers.Layer.Vector("Magic");
map.addLayer(vector);
vector.addFeatures([feature]);
}
and yep I know that second line where I creating feature is wrong, but i cant make it right so i guess id doesn't matter what I write there for now...
I tried it with var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-70.702451, 42.374473); and it worked position on the map was not where I want it to be but I know that i have to do something with projection... It just doesn't matter now.
and btw I have this
vector = new OpenLayers.Layer.Vector("GeoJSON",
{
projection : "EPSG:4326",
onFeatureInsert : postIns,
strategies : [new OpenLayers.Strategy.Fixed()],
protocol : new OpenLayers.Protocol.HTTP({
url: "test.php",
format: new OpenLayers.Format.GeoJSON()
})
});
And this works, position is where I want it, its perfect except it only works when I make request on my domain, and server I try to reach is on another(I know I can set headers and it would work) but I don't want to do it this way.
So basically I am asking how to get Feature from my GeoJSON. I am really new to OpenLayers so I'm sorry if I asking something obvious.
To use a simplified version of the official example:
var inputGeoJson = '...some-GeoJSON-here...';
var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector();
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(inputGeoJson));
You can find more details in the GeoJSON class documentation.
In Mapstraction map need to draw a polygon which is editable.
So i have tried a example.
But polygon is editable mode while it's calling function href="javascript:mapstraction.activateEdition();" in example.
I have tried to do that. Didn't get succeed.
How do i create polygon which user can edit it and also is this possible to keep only 10 vertices polygon.
JS Code
var polyPoint;
var polyPoints = []
//Adding polygon to map
polyPoint = new mxn.LatLonPoint(17.447612 , 78.223686)
polyPoints.push(polyPoint);
polyPoint = new mxn.LatLonPoint(17.504593 , 78.306084)
polyPoints.push(polyPoint);
polyPoint = new mxn.LatLonPoint(17.471193 , 78.417320)
polyPoints.push(polyPoint);
polyPoint = new mxn.LatLonPoint(17.414201 , 78.470879)
polyPoints.push(polyPoint);
var polygon = new mxn.Polyline(polyPoints);
polygon.setClosed(true);
map.addPolyline(polygon)
//Adding event listeners to map
mapstraction.markerChanged.addHandler(function(event,map,marker){
alert('Marker moved to: '+marker.marker.location.lat+' , '+marker.marker.location.lon)})
mapstraction.polylineChanged.addHandler(function(event,map,polyline){
alert('Polyline modified: Now it has '+polyline.polyline.points.length+' vertices')})
That example is for the idelab fork of Mapstraction so you need to ensure you're using that version which you can get from here:
https://github.com/idelab/mxn
I'm not sure whether the idelab version is still supported and I think OpenLayers API has changed since it was initially developed so, if you are using the correct version, that could be why you're having problems.
I'm afraid editable maps are not supported in the trunk version of Mapstraction. Primarily because not all the map providers support it so it would be less useful as part of Mapstraction. Also because most people don't require it so its difficult to justify the effort of adding it to the library.
If you are using OpenLayers and don't need to be able to switch provider you should consider programming directly against the OpenLayers API. If you do need to be able to switch provider you should contact the owner of the idelab repo (plopesc) and check whether it supports your use case.
I am having the weirdest problem right now using the ArcGIS Javascript API (v2.4). I'm merely trying to create an instance of an ESRI topo map with an extent, and then add a layer.
Here is the code that works. I create an extent, then a map, then a streetmap layer and then finally add that layer.
var startExtent = new esri.geometry.Extent(-71.5, 42, -71, 42.5, new esri.SpatialReference({wkid:4326}) );
map = new esri.Map("map_canvas", { extent: startExtent,fitExtent:false });
var streetmap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
map.addLayer(streetmap);
However when I try and do the same thing with a separate server, it doesn't work.
var startExtent = new esri.geometry.Extent(-71.5, 42, -71, 42.5, new esri.SpatialReference({wkid:4326}) );
map = new esri.Map("map_canvas", { extent: startExtent,fitExtent:false });
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
I know that the faulty-layer's server works, because if I create a map with no extent, it shows the full world imagery server, so it appears that creating a map in with one layer and an extent works, while creating a map with a different layer but the same extent does not work.
Any ideas why?
In your second example, the layer is in web Mercator.
Try converting the extent from geographic to web Mercator before using it in the map constructor.
The easiest way to convert the extent is to use esri..geometry.geographicToWebMercator.