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>' }