Develop Reference

Laravel send data from view to JavaScript file

i want to send data that i get it from controller to javascript file that exist in public/js/maps.js
how can i do this can any one help
my code
Controller :
public function index()
{
$userIp = "45.153.242.129";
$locationData = \Location::get($userIp);
return view('maps.index',[
'location' => $locationData
]);
}
view page:
<div id="world-map"></div>
maps.js
var handleVectorMap = function() {
"use strict";
if ($('#world-map').length !== 0) {
$('#world-map').vectorMap({
map: 'world_mill',
scaleColors: [COLOR_GREY_DARKER, COLOR_GREY_LIGHTER],
normalizeFunction: 'polynomial',
hoverOpacity: 0.5,
hoverColor: false,
zoomOnScroll: true,
markerStyle: {
initial: {
fill: COLOR_RED,
stroke: 'transparent',
r: 3
}
},
regionStyle: {
initial: {
fill: COLOR_DARK_LIGHTER,
"fill-opacity": 1,
stroke: 'none',
"stroke-width": 0.4,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'yellow'
},
selectedHover: { }
},
backgroundColor: 'transparent',
markers: [
{latLng: [41.90, 12.45], name: 'Vatican City'},
{latLng: [43.73, 7.41], name: 'Monaco'},
]
});
}
};
so i want to display data in markers that exist in the javascript file.

If it was in a single blade file, you could echo de json_encoded variables
<div id="world-map"></div>
<script>
const data = JSON.parse('{{ json_encode($data); }}');
</script>
If it's in a separate js file, you either need to get it through an ajax request or store the data in an html element to query inside your js file.
Something like
<div id="world-map" data-maps='{{ json_encode($data) }}'></div>
const data = JSON.parse(document.getElementById('world-map').dataset.maps);
I think blade has a #json directive just for such a scenario.

in normanl case when you call a data from controller usually we use
{{ $data }}
but if you want to call the same data but inside a javascript code or file i recommend using
function (index, value) { data = '<p>'+value.data+'</P>' }

Connect dots in map using JavaScript marker

So I try to make an interactive map for one of my projects.
Here what I have done:
I want a help on how these two dots can be connected with a line.
Note: This is not google maps API
Here is the code:
<script>
$(function() {
$("#world_map").vectorMap({
map: "world_mill",
normalizeFunction: "polynomial",
hoverOpacity: .7,
hoverColor: false,
regionStyle: {
initial: {
fill: "#e3eaef"
}
},
markerStyle: {
initial: {
"r": 9,
"fill": window.theme.primary,
"fill-opacity": .95,
"stroke": "#fff",
"stroke-width": 7,
"stroke-opacity": .4
},
hover: {
"stroke": "#fff",
"fill-opacity": 1,
"stroke-width": 1.5
}
},
backgroundColor: "transparent",
zoomOnScroll: false,
markers: [{
latLng: [49.009724, 2.547778],
name: "Paris"
},
{
latLng: [37.983810, 23.727539],
name: "Athens"
}
]
});
setTimeout(function() {
$(window).trigger('resize');
}, 250)
});
</script>

I can't test this, but let me know if it works. The idea is you pass into this function the index of the markers from your markers array.
Also, you'll need to add a <canvas> element to overlay your map
<canvas id="canvas" height="400" width="500"></canvas>
function drawLine(fromIndex, toIndex) {
const canvas = document.querySelector('#canvas');
var fromMarker = $('circle [data-index="'+fromIndex+'"]').position();
var toMarker = $('circle [data-index="'+toIndex+'"]').position();
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
// draw a red line
ctx.beginPath();
ctx.moveTo(fromMarker.x, fromMarker.y);
ctx.lineTo(toMarker.x, toMarker.y);
ctx.stroke();
}
// know the indexes of the 2 markers in order of the way they're listed
drawLine(0, 1);

How to pass 2 values to json style in leaflet

I need to pass 2 styles, i currently have:
First style:
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
The I do:
var classNameMap = <?php echo JSON_encode($classesForCountries); ?>;
geojson = L.geoJson(statesData, {
style: style,
style: function(feature) {
var classes = classNameMap[feature.properties.name];
return {className: classes};
},
onEachFeature: onEachFeature
}).addTo(map);
But that ignores the first style
I tried by passing it as an array:
geojson = L.geoJson(statesData, {
style: [style, function(){
var classes = classNameMap[feature.properties.name];
return {className: classes};
}],
onEachFeature: onEachFeature
}).addTo(map);
But yet, first style is ignored.
leaflet docs if this can help, here

This is the solution:
var classNameMap = <?php echo JSON_encode($classesForCountries); ?>;
function style(feature) {
var classes = classNameMap[feature.properties.name];
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density),
className: classes
};
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);

Not familiar with leaflet, but looking from js perspective using duplicate key will definitely override its value with the last key entry.
If you are trying append the style1 and style2, since both the functions of style returns an object, you can do so by $.extend.
function style_1(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
...
style: function(feature) {
// Now the logic is a simple hashmap look-up
var style1 = style_1(feature);
var classes = classNameMap[feature.properties.name];
var finalStyle = $.extend(style1, {className: classes});
return finalStyle;
}
...

You're putting duplicate keys in the object initializer. Don't.
See How to generate a JSON object dynamically with duplicate keys? , Finding duplicate keys in JavaScript object

How to show one layer map with many style

I want to show a layer map with many style depending on some attribute in the layer, but don't know how,. If I use SLD in geoserver I just show only one style, I have tried writing something in javascript (based on Openlayer library) like below, but it didn't work, the code didn't have any effect to the layer map. Any suggestion will be greatly appreciated.
//create a style object
var style = new OpenLayers.Style();
//rule used for all polygons
var rule_p1 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "1",
}),
symbolizer: {
fillColor: "#00FF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
var rule_p2 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "2",
}),
symbolizer: {
fillColor: "#40FF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
var rule_p3 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "3",
}),
symbolizer: {
fillColor: "#80FF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
var rule_p4 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "4",
}),
symbolizer: {
fillColor: "#FFFF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
style.addRules([rule_p1, rule_p2, rule_p3, rule_p4]);
mybinh = new OpenLayers.Layer.WMS(
"Lớp Mỹ Bình", urlmapfile,
{
LAYERS: 'demo:mybinh',
transparent:"true",
format: format,
styleMap: style
},
{singleTile: true, ratio: 1, isBaseLayer: false}
);

From your code snippet I assume that you want to serve a WMS Layer provided by the GeoServer. In this case you receive an image file rendered by the server and the styling is part of the Geoserver (SLD). On client side (OpenLayers) you are only able to style Vector features.
You can define different Styles (SLD) for your layer and switch between the styles by changing the WMS query parameter (see http://docs.geoserver.org/latest/en/user/services/wms/reference.html ).

markerStyle in JVectorMap

I'm trying to style the markers from http://jvectormap.com/examples/markers-world/ but I'm having difficult time applying the background image for the markers
background attribute isn't working here, any directions for this?
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47',
background: 'url("image.jpg") no-repeat 0 0 transparent'
}
},

found the alternative option
jvectormap: How to implement HTML instead of simple string in the markers label/tooltip?
$('#map').vectorMap({
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{latLng: [46.90, 8.45], name: "My marker name"}
],
onMarkerLabelShow: function(event, label, code) {
label.html("<img src=\"img/logo.png\"><br>"+ label.html());
}
});