Develop Reference

Rails 7 importmap leaflet-css images path fix?

What I'd like to do:
I would like to have a leaflet layers control in my Rails 7 app.
What I get:
Leaflet works fine, but the control appears without the icon, like this:
and in the browser console I get this error:
GET http://my_ip/trial_models/undefined/layers.png 404 (Not Found)
and in my server log the error is presented like this:
Started GET "/trial_models/undefined/layers.png" for my_ip at 2022-03-30 06:50:43 +0000
ActionController::RoutingError (No route matches [GET] "/trial_models/undefined/layers.png"):
I've replaced the actual ip address with "my_ip". The 'undefined' is really there in the error messages.
How I did it:
First I created a Rails 7 app and imported leaflet like this:
./bin/importmap pin leaflet
./bin/importmap pin leaflet-css
I then created a TrialModel using standard rails g scaffold. I then added the following stimulus div in trail_models\show.html.erb :
<div data-controller="trialmap" data-trialmap-target="trial" style="height:600px" class="leaflet-container"></div>
I created \app\javascript\controllers\trialmap_controller.js with the following contents:
import { Controller } from "#hotwired/stimulus";
import "leaflet-css";
export default class extends Controller {
static targets = [ "trial" ]
connect(){
import("leaflet").then( L => {
this.map = L.map(this.trialTarget).setView([ 51.472814, 7.321673 ], 14);
var base_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap | SwmmGo',
transparency: true,
opacity: 0.5
}).addTo(this.map);
var landMap = L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {attribution: 'attributions'});
var layersControl = new L.Control.Layers({
"Street Map": base_map,
"Landscape": landMap
});
this.map.addControl(layersControl);
});
}
disconnect(){
this.map.remove()
}
}
What I've explored:
I tried downloading leaflet-css like this:
./bin/importmap pin leaflet-css --download
but same result.
I can see that there is a references background-image:url(images/layers.png); in the imported/ downloaded file vendor/javascript/leaflet-css.js. But there doesn't seem be any images folder anywhere like vendor/javascript/images/ or the like.
The stringify version of L.Control.prototype.options is just {"position":"topright"}.
I tried setting L.Control.prototype.options.iconUrl = "layers.png" (and "/layers.png") in the js controller and then placing a manually downloaded layers.png file in public. But this changed neither the results nor the error messages.
My questions:
How can I get the icon to show and the error to disappear? (a work-around would be ok too)
What is the "correct way" to handle assets and asset paths which css files reference when using importmap?
Any help would be much appreciated! Thanks!

I had similiar problems when using markers, my solution was not using leaflet-css and just using the leaflet CSS from CDN

I did like Luis - put the leaflet.css downloaded from https://leafletjs.com in vendor/assets/stylesheets and the images in public/images - that solved my issues with broken marker/layer images

Don't use leaflet-css, it bundles both the leaflet css and an ancient version (0.6.4) of the leaflet js code. It seems that the other answers here are on target - rails importmaps are for js only; if you are working with a third-party lib that has its own css assets you will need to handle those separately either through a CDN or by downloading them and placing them alongside your other css assets.

Mapbox-gl Hosted S3 - addsource

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

Open Layers 2 Creating and adding Feature to Vector Layer from Ajax Response

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.

Mapstraction - draw polygon dynamically

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.

OpenLayers Map BoundingBox calculation

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.