Hello,
I'm using the Directions widget present in javascript api 3.23, I'm getting the result, but i want to place my custom images for the stops.
Here i'm trying to change the red point to blue point for the destination stop by using the mentioned styles, but it is not working
Can anyone help me out to put the custom images for the destination stops?
Regards
Siva
Solved! Go to Solution.
Siva,
For that you have to modify the Widget.js file (lines 5, 9, 31, 32 and 41). Also add this css rule with the earlier one:
.esriDMTStopDestination .esriRouteIcon {
background-image: url(../images/bluePoint.png);
}
...
'dojo/Deferred',
'dojo/promise/all',
'jimu/portalUtils',
'esri/symbols/PictureMarkerSymbol'
],
function(declare, BaseWidget, Directions, Locator, RouteParameters, esriRequest, graphicsUtils,
ArcGISDynamicMapServiceLayer, on, lang, html, array, dojoConfig, Deferred, all, portalUtils,
PictureMarkerSymbol) {
...
startup: function(){
this.inherited(arguments);
this.portal = portalUtils.getPortal(this.appConfig.portalUrl);
this._preProcessConfig().then(lang.hitch(this, function(){
var routeParams = new RouteParameters();
var routeOptions = this.config.routeOptions;
if(routeOptions){
if(routeOptions.directionsLanguage){
routeParams.directionsLanguage = routeOptions.directionsLanguage;
}
else{
routeParams.directionsLanguage = dojoConfig.locale || "en_us";
}
routeParams.directionsLengthUnits = routeOptions.directionsLengthUnits;
routeParams.directionsOutputType = routeOptions.directionsOutputType;
if(routeOptions.impedanceAttribute){
routeParams.impedanceAttribute = routeOptions.impedanceAttribute;
}
}
var toSym = new PictureMarkerSymbol('https://js.arcgis.com/3.23/esri/dijit/images/Directions/bluePoint.png', 21, 29);
toSym.setOffset(0,12);
var options = {
map: this.map,
searchOptions: this.config.searchOptions,
routeParams: routeParams,
routeTaskUrl: this.config.routeTaskUrl,
dragging: true,
showClearButton: true,
mapClickActive: true,
toSymbol: toSym
};
...
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Siva,
You should use:
.esriDMTStopDestination .esriRouteIcon {
background-image: url(/images/bluePoint.png) !important;
}
Robert
Thank you for the reply.
Even i put the important keyword over there it is not showing the custom image.
It will be very much helpful for me if you could provide exactly which style is changing the image of the destination stop.
Thanks
Siva
Siva,
Here is what I tested and it worked for me. This is configure for the bluePoint.png to be in this directory
[install dir]\server\apps\[app#]\widgets\Directions\images
and the css rule to be at the end of the [install dir]\server\apps\[app#]\widgets\Directions\css\style.css file.
.simpleDirections .esriStopDestination .esriStopIcon {
background-image: url(../images/bluePoint.png);
}
Robert,
Thank you for this snippet.
I can change the image in one of the stops as mentioned in the below screenshot
there that location 3 is having blue pin in the widget but red pin remains unchanged in the map.
it will be very much helpful for me if you could provide the area where i should make changes to get the desired blue pin on the direction showing within the map too.
Regards
Siva
Siva,
For that you have to modify the Widget.js file (lines 5, 9, 31, 32 and 41). Also add this css rule with the earlier one:
.esriDMTStopDestination .esriRouteIcon {
background-image: url(../images/bluePoint.png);
}
...
'dojo/Deferred',
'dojo/promise/all',
'jimu/portalUtils',
'esri/symbols/PictureMarkerSymbol'
],
function(declare, BaseWidget, Directions, Locator, RouteParameters, esriRequest, graphicsUtils,
ArcGISDynamicMapServiceLayer, on, lang, html, array, dojoConfig, Deferred, all, portalUtils,
PictureMarkerSymbol) {
...
startup: function(){
this.inherited(arguments);
this.portal = portalUtils.getPortal(this.appConfig.portalUrl);
this._preProcessConfig().then(lang.hitch(this, function(){
var routeParams = new RouteParameters();
var routeOptions = this.config.routeOptions;
if(routeOptions){
if(routeOptions.directionsLanguage){
routeParams.directionsLanguage = routeOptions.directionsLanguage;
}
else{
routeParams.directionsLanguage = dojoConfig.locale || "en_us";
}
routeParams.directionsLengthUnits = routeOptions.directionsLengthUnits;
routeParams.directionsOutputType = routeOptions.directionsOutputType;
if(routeOptions.impedanceAttribute){
routeParams.impedanceAttribute = routeOptions.impedanceAttribute;
}
}
var toSym = new PictureMarkerSymbol('https://js.arcgis.com/3.23/esri/dijit/images/Directions/bluePoint.png', 21, 29);
toSym.setOffset(0,12);
var options = {
map: this.map,
searchOptions: this.config.searchOptions,
routeParams: routeParams,
routeTaskUrl: this.config.routeTaskUrl,
dragging: true,
showClearButton: true,
mapClickActive: true,
toSymbol: toSym
};
...
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Robert
Thank you so much, it is working for me.
Regards
Siva