jQuery Map - Add and Remove
To add routes at design-time, pass an array of objects to the routes property. A route requires only its locations to be specified. The locations will be connected and make up the route.
jQuery
JavaScript
$(function() {
$("#mapContainer").dxMap({
zoom: 5,
routes: [{
locations: [
{ lat: 40.782500, lng: -73.966111 },
"40.755833, -73.986389",
[ 40.753889, -73.981389 ],
"Brooklyn Bridge,New York,NY"
]
}]
});
});Angular
HTML
TypeScript
<dx-map
[zoom]="5"
[routes]="mapRoutes">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
mapRoutes = [{
locations: [
{ lat: 40.782500, lng: -73.966111 },
"40.755833, -73.986389",
[ 40.753889, -73.981389 ],
"Brooklyn Bridge,New York,NY"
]
}];
}
@NgModule({
imports: [
// ...
DxMapModule
],
// ...
})Vue
<template>
<DxMap
:zoom="5"
:routes="mapRoutes"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxMap } from 'devextreme-vue/map';
export default {
components: {
DxMap
},
data() {
return {
mapRoutes: [{
locations: [
{ lat: 40.782500, lng: -73.966111 },
"40.755833, -73.986389",
[ 40.753889, -73.981389 ],
"Brooklyn Bridge,New York,NY"
]
}]
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Map } from 'devextreme-react/map';
const mapRoutes = [{
locations: [
{ lat: 40.782500, lng: -73.966111 },
"40.755833, -73.986389",
[ 40.753889, -73.981389 ],
"Brooklyn Bridge,New York,NY"
]
}];
class App extends React.Component {
render() {
return (
<Map
defaultZoom={5}
routes={mapRoutes}
/>
);
}
}
export default App;jQuery
To add or remove a route at runtime, call the addRoute(routeOptions) or removeRoute(route) method.
JavaScript
const routesCollection = [{
locations: [
"40.753889, -73.981389",
"Brooklyn Bridge,New York,NY"
]
}, {
locations: [
[40.8304282, -73.9455893],
[40.767693, -73.9962566],
[40.7198128, -74.0012278]
]
}];
// Adds a route
map.addRoute(routesCollection[0]);
// Adds several routes
map.addRoute(routesCollection);
// Removes the route with specific configuration
map.removeRoute(routesCollection[0]);
// Removes the route with index 1 in the "routes" array
map.removeRoute(1);
// Removes the routes with specific configurations
map.removeRoute(routesCollection);
// Removes the routes with indexes 0 and 2 in the "routes" array
map.removeRoute([0, 2]);Angular
To add or remove a route at runtime, bind the routes property of the Map to a component property.
HTML
TypeScript
<dx-map
[zoom]="10"
[routes]="mapRoutes">
</dx-map>
<dx-button
text="Add the Route"
(onClick)="addRoute()">
</dx-button>
<dx-button
text="Remove the Route"
(onClick)="removeRoute()">
</dx-button>
import { DxMapModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
mapRoutes = [{
locations: [
"40.782500, -73.966111",
"40.755833, -73.986389"
]
}];
addRoute () {
this.mapRoutes.push({
locations: [
"40.753889, -73.981389",
"Brooklyn Bridge,New York,NY"
]
});
};
removeRoute () {
this.mapRoutes.pop();
}
}
@NgModule({
imports: [
// ...
DxMapModule,
DxButtonModule
],
// ...
})Vue
To add or remove a route at runtime, bind the routes property of the Map to a component property.
<template>
<div>
<DxMap
:zoom="10"
:routes="mapRoutes"
/>
<DxButton
text="Add the Route"
@click="addRoute"
/>
<DxButton
text="Remove the Route"
@click="removeRoute"
/>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxMap } from 'devextreme-vue/map';
import { DxButton } from 'devextreme-vue/button';
export default {
components: {
DxMap,
DxButton
},
data() {
return {
mapRoutes: [{
locations: [
{ lat: 40.782500, lng: -73.966111 },
"40.755833, -73.986389",
[ 40.753889, -73.981389 ],
"Brooklyn Bridge,New York,NY"
]
}]
};
},
methods: {
addRoute() {
this.mapRoutes.push({
locations: [
"40.753889, -73.981389",
"Brooklyn Bridge,New York,NY"
]
});
},
removeRoute() {
this.mapRoutes.pop();
}
}
}
</script>React
To add or remove a route at runtime, bind the routes property of the Map to a state property.
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Map } from 'devextreme-react/map';
import { Button } from 'devextreme-react/button';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
mapRoutes: [{
locations: [
{ lat: 40.782500, lng: -73.966111 },
"40.755833, -73.986389",
[ 40.753889, -73.981389 ],
"Brooklyn Bridge,New York,NY"
]
}]
};
this.addRoute = this.addRoute.bind(this);
this.removeRoute = this.removeRoute.bind(this);
}
addRoute() {
this.state.mapRoutes.push({
locations: [
"40.753889, -73.981389",
"Brooklyn Bridge,New York,NY"
]
});
}
removeRoute() {
this.state.mapRoutes.pop();
}
render() {
return (
<div>
<Map
defaultZoom={10}
routes={this.state.mapRoutes}
/>
<Button
text="Add the Route"
onClick={this.addRoute}
/>
<Button
text="Remove the Route"
onClick={this.removeRoute}
/>
</div>
);
}
}
export default App;See Also
Feedback