Comments (6)
BohdanKorinnyi
commented on May 31, 2024
Hi @Naimikan !
Do you have any idea how to do it?
from angular-mapboxgl-directive.
BohdanKorinnyi
commented on May 31, 2024
Hi @Naimikan !
I was able to do it using MapboxGL without AngularJS, it looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a GeoJSON line</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<MAPBOX_ACCESS_TOKEN>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-122.486052, 37.830348],
zoom: 15
});
map.on('click', function (e) {
console.log(e.originalEvent.target.tagName);
if (e.originalEvent.target.tagName === 'CANVAS') {
let polygonFeatures = map.queryRenderedFeatures(e.point, {layers: ['route']});
let feature = polygonFeatures[0];
console.log(polygonFeatures);
}
});
map.on('load', function () {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type":"FeatureCollection",
"features":[{
"type": "Feature",
"properties": {'color':'#123'},
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
},{
"type": "Feature",
"properties": {'color':'#888'},
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506]
]
}
}]
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
'line-color': {
'type': 'identity',
'property': 'color'
},
"line-width": 8
}
});
});
</script>
</body>
</html>
from angular-mapboxgl-directive.
Naimikan
commented on May 31, 2024
Hi @BohdanKorinnyi!
You can get the feature clicked using events attribute in the layer structure, like:
$scope.glLayers = [
{
// Your layer structure..
events: {
onClick: function (map, feature, features) {
// Here, you have the feature clicked
}
}
}
];Tell me if it worked!
from angular-mapboxgl-directive.
BohdanKorinnyi
commented on May 31, 2024
@Naimikan thank you! It works, but how can I use some my function which is override in my controller or service?
from angular-mapboxgl-directive.
Naimikan
commented on May 31, 2024
Hi @BohdanKorinnyi!
I don't understand your question, what do you want to do? You can use any function that you defined in $scope:
$scope.glLayers = [
{
// Your layer structure..
events: {
onClick: function (map, feature, features) {
// Here, you have the feature clicked
$scope.myFunction(feature);
}
}
}
];from angular-mapboxgl-directive.
BohdanKorinnyi
commented on May 31, 2024
Thank you @Naimikan !
from angular-mapboxgl-directive.
Related Issues (20)
- Navigation control does not work HOT 4
- Invalid source ID HOT 1
- Markers lose its position during scroll HOT 6
- How can I use an image as an icon-image for the 'unclustered-point' layer? HOT 1
- Map doesn't handle data changes after any events HOT 2
- Save and load polygon drawn with mapbox draw tool
- Angular 2 Support? HOT 3
- Question: Clean source and layer HOT 3
- Map events are not $broadcast inside an $apply HOT 3
- Leaflet Instance HOT 1
- A way to set map dimensions
- Help need to retrieve zoom level HOT 1
- Question: Is there a simple way to get a reference to the underlying map? HOT 3
- click event for custom markers
- How do I get bounds of the current map HOT 1
- Broken Example Link
- Directions control doesn't show path
- Whether to support the mapbox latest version
- Fullscreen button
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-mapboxgl-directive.