We Keep Coding

I can't show a multipolygon on a map in OpenLayers

I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.

Features NVZ takes more time to load on map

Features NVZ takes more time to load on map
I am fetching data from Layer:
https://environment.data.gov.uk/arcgis/rest/services/EA/NitrateVulnerableZones2017Final/FeatureServer/0
I am using arcgis javascript api 4.14 version
If I zoom in the map on zoom level 6 then only this NVZ features are
displaying on map, but its taking more time to load on map.
Here is my code:-
var map;
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView",
"esri/geometry/Polygon",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/Graphic",
"esri/symbols/SimpleFillSymbol",
"esri/Color"
],
function(Sketch, Map, GraphicsLayer, MapView, Polygon, FeatureLayer, SimpleLineSymbol, Graphic, SimpleFillSymbol, Color) {
const layer = new GraphicsLayer();
const map = new Map({
basemap: "streets",
layers: [layer]
});
const view = new MapView({
container: "map",
map: map,
zoom: 5,
center: [-3.118092, 54.509865]
});
// set dynamic url for feature layer
function initOperationalLayer() {
var featureLayer = new FeatureLayer("https://environment.data.gov.uk/arcgis/rest/services/EA/NitrateVulnerableZones2017Final/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
map.add(featureLayer);
});
}
initOperationalLayer();
});

How to apply JSON responseText to Google Maps in Ruby on Rails?

So in my Rails app I am building out a region show page with multiple locations. Users are able to insert new locations and map markers need to be dynamically placed based on the latitude and longitude that they enter. In my Region show page I have the following:
<div class="container-fluid">
<div class="row">
<div class="banner" id="region-banner" data-region-name="<%=#region.name.downcase%>">
<script>document.addEventListener('DOMContentLoaded',app.regions);</script>
Then in my region.js file I have the following:
import { tns } from 'tiny-slider/src/tiny-slider.module';
import { mapStyle } from './styles/mapStyle';
app.regions = () => {
function init() {
startGoogleMap();
}
let startGoogleMap = () => {
let map = new google.maps.Map(document.getElementById('region-banner'), {
zoom: 3,
minZoom: 3,
disableDefaultUI: true,
gestureHandling: 'cooperative',
styles: mapStyle
});
var mapElement = document.getElementById('region-banner');
const regionName = mapElement.getAttribute('data-region-name');
let bounds = new google.maps.LatLngBounds();
let promise = $.getJSON('/locations.json');
promise.done(function(data) {
return $.each(data, function() {
return new google.maps.Marker({
position: {
lat: parseFloat(data.lat),
lng: parseFloat(data.lng) },
map: map,
icon: "/marker.png"
});
});
});
console.log(promise);
map.fitBounds(bounds);
};
return init();
};
Then in my controller I have:
def show
#locations = Location.all
respond_to do |format|
format.json { render json: #locations }
format.html
end
end
So no real errors are applying however...nothing appears. The console shows the responseText:“[{“id”: 5, “name”: “Chicago”, “abbreviation”: “CHI”, “lat”: “44.222”, “lng”: “-22.111”}, {“id”: 6, “name”: “Frankfort”, “abbreviation”: “FKT”, “lat”: “41.3232”, “lng”: “-19.5221”} ]”. Which really on this page I should only need/use the first.
Shouldn't it also be applying the markers at this stage since I put in the position?

this is the code responsible for setting your Markers.
I would focus on understanding why promise.done() does not run create the new google.maps.Marker() for each row in your (data) from your response.
Maybe the problem is connected to the /marker.png
promise.done(function(data) {
return $.each(data, function() {
return new google.maps.Marker({
position: {
lat: parseFloat(data.lat),
lng: parseFloat(data.lng) },
map: map,
icon: "/marker.png"
});
});
});

How to do on page load of dynamic pages with JavaScript and Rails?

I'm trying to set up an on page load function for dynamic pages (shows) that will only display certain variables that meet the requirements. For example if someone clicks on West Coast the map will only display California, Washington, and Idaho. If they click on Great Plains the map shows Iowa, Nebraska, Kansas. And so on.
Right now I have it set up, in my region.js file:
app.regions = () => {
function init() {
startGoogleMap();
}
let startGoogleMap = () => {
let map = new google.maps.Map(document.getElementById("region-banner"), {
zoom: 7,
// The latitude and longitude to center the map (always required)
disableDefaultUI: true,
gestureHandling: "cooperative",
styles: mapStyle
});
const cali = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
map: map,
icon: '/icon.jpg',
title: 'California',
region: 'West Coast'
});
return init();
};
Then in my regions I actually have a list of regions with the following in the table:
create_table "regions", force: :cascade do |t|
t.string "name"
t.string "url_name"
end
So in a nutshell I need to compare a variable against the region name on page load.
UPDATE:
This is what is currently in my show:
<div class="container-fluid">
<div class="row">
<div class="banner" id="region-banner">
</div>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded', app.regions);</script>
EDIT:
I applied the following in my show > script:
let regionContainer = document.getElementById('region-banner');
regionContainer.dataset.region
Then changed my show to:
<div class="banner" id"region-banner"><%= #region.name %></div>
Nothing happened. No errors though.

One way to achieve this is to use data attributes on the container in which your map is loaded (although you could really use any element).
Assuming you have a variable #region for the current region in your show view, and assuming you're going to load the map in a div with a "map" id, you could do something like this in the markup:
<div id="map" data-region="<%= #region.name %>"></div>
And then you could retrieve that attribute in your JS file with something like this:
var mapContainer = document.getElementById('map');
mapContainer.dataset.region // Would be the result of #region.name

So the fix for future reference I did with both JS and Rails.
In JS
const markers = {
"west/coast": [{
position: [x,y],
title: 'California'
}]};
app.regions = () => {
function init () {
startGoogleMap();
}
let startGoogleMap = () => {
let map = new google.maps.Map(document.getElementById("region-banner"), {
zoom: 3,
minZoom: 3,
disableDefaultUI: true,
gestureHandling: "cooperative",
styles: mapStyle
});
var mapElement = document.getElementById("region-banner");
const regionName = mapElement.getAttribute('data-region-name')
let bounds = new google.maps.LatLngBounds();
markers[regionName].forEach(({ position, ...opts }) => {
const marker = new google.maps.Marker({
...opts,
position: new google.maps.LatLng(...position),
map
});
bounds.extend(marker.position);
});
Then in the show:
<div class="banner" id="region-banner" data-region-name=<%=#region.name.downcase%></div>

google maps pin api v3

I have got a google map loading on my website using the api. I have styled it how I would like but I need to add a pin with custom image to a location on my map. The center co-ordinatres are different of those that I would like to use for the pin. I have tried using the code supplied in the google api docs but cannot seem to get it to work. below is the code I am using now without the pin code as it wasn't working. Would someone be able to tell me what to add to get the pin working for an image file called:
'pin.png'
and the co-ordinates:
51.4531807,-2.1864739,17
here is my current JS
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
var map = new google.maps.Map(mapElement, mapOptions);
var office = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: office,
map: map
});
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(51.4476895, -2.2057354), // New York
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
streetViewControl: false,
disableDefaultUI: true,
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [ { featureType:'water', elementType:'all', stylers:[ {hue:'#bbbbbb'}, {saturation:-100}, {lightness:-4}, {visibility:'on'} ] },{ featureType:'landscape', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-33}, {visibility:'on'} ] },{ featureType:'road', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-6}, {visibility:'on'} ] },{ featureType:'poi', elementType:'all', stylers:[ {hue:'#aaaaaa'}, {saturation:-100}, {lightness:-15}, {visibility:'on'} ] },{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
}

The code to display the pin on the map was correct however this was outside of where the map is accessible. To rectify this issue the code had to be put after the map and before the closing bracket as displayed by #Dr.Molle
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var hadston = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: hadston,
map: map,
clickable: false,
icon: 'pin.png'
});
}
To display a custom pin I used icon with a direct link to the image.
icon: 'pin.png'