Developer Discussions

Discuss topics with other Hexagon Geospatial Power Portfolio developers and experts to get the most out of our products.
Showing results for 
Search instead for 
Do you mean 
Reply
Highlighted
Regular Contributor
Posts: 253
Registered: ‎05-01-2016
Accepted Solution

Setting STYLE of feature - $GP.dynamicStyles.register example - BUG Override HELP

[ Edited ]

I cannot get this example I got from the SDK documentation to work. The service is added but the USA_CITIES layer is not added to the map.

The less than sign was in HTML with percent sign but I changed that for my test. I can add the cities manually so it seems like it should work.

Also where can I read more about the syntax for specifying a service and feature - below the URL has brackets around it - i am using a text string with | character between service and feature name for ids: specification in $GP.legend.add code and it works properly.

 

$GP.dynamicStyles.register({    featureClassId: "{http://www.intergraph.com/geomedia/gml}OM_USA_CITIES",
    default: function (feature) {
        if (feature.get_geoJSON().properties["{http://www.intergraph.com/geomedia/gml}ID"] < 1500)
            return null;
        return {
            "style": {
                "color": "#f00",
                "name": "Red dot",
                "size": 5,
                "translucency": 0.2
            },            defaultStyleName: "none",            styleType: "Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimplePointStyle"
        }
    }
}, function () {    $GP.legend.add({        url: "http://demo.hexagongeospatial.com/GWM_WFS_NonTransactional/service.svc/get",        definitionName: "WFS",        ids: ["{http://www.intergraph.com/geomedia/gml}OM_USA_CITIES"]
}) });

 Thanks!

Regular Contributor
Posts: 253
Registered: ‎05-01-2016

Re: $GP.dynamicStyles.register example

Should this example work?

Technical Evangelist
Posts: 132
Registered: ‎08-05-2015

Re: $GP.dynamicStyles.register example

Hi, the demo server is being republished now. For some reason the feature class name changed from OM_USA_CITIES to OM_USA_Cities.

 

Please use the following code with updated featureClassId:

 

$GP.dynamicStyles.register({    featureClassId: "{http://www.intergraph.com/geomedia/gml}OM_USA_Cities",
    default: function (feature) {
        if (feature.get_geoJSON().properties["{http://www.intergraph.com/geomedia/gml}ID"] < 1500)
            return null;
        return {
            "style": {
                "color": "#f00",
                "name": "Red dot",
                "size": 5,
                "translucency": 0.2
            },            defaultStyleName: "none",            styleType: "Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimplePointStyle"
        }
    }
}, function () {    $GP.legend.add({        url: "http://demo.hexagongeospatial.com/GWM_WFS_NonTransactional/service.svc/get",        definitionName: "WFS",        ids: ["{http://www.intergraph.com/geomedia/gml}OM_USA_Cities"]

    })
});

Best regards,

Piotr

Regular Contributor
Posts: 253
Registered: ‎05-01-2016

Re: $GP.dynamicStyles.register example

[ Edited ]

Thanks for the help!  I changed to my service name, connection name and feature name and changed ID to an attribute for my feature.

All is working for me except setting the style.  My feature is a linear one and it is coming from a Webmap Publisher project.  It displays on map with the above code but the color and translucency are not set to my specified values.  I tried changing 

 

"Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimplePointStyle"

to

"Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimpleLineStyle"

Where would I look to find the correct Style name to use and what options can be set for it?  Also can the ids: argument have more than one feature name specified  (like i want to add Pipe01, Pipes02, Pipes03, etc.)

Thanks again,

Jane

Technical Evangelist
Posts: 1,147
Registered: ‎09-11-2015

Re: $GP.dynamicStyles.register example

[ Edited ]

Hi Jane,

 

please have a look here to get better idea about how the styles are composed:

https://hexagongeospatial.fluidtopics.net/book#!book;uri=415b8e17eff07e06a1b5c2c7510410d6;breadcrumb...

 

Jan

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Technical Evangelist
Posts: 132
Registered: ‎08-05-2015

Re: $GP.dynamicStyles.register example

Hi Jane,

 

Jan Neumann posted alternative solution to work with styles in the Portal - maybe that one could be also useful for your case. The original style definitions in the Geospatial Portal API are using a little older mechanism that predates these configurations. We are working on unifying these definitions so that they are consistent across the product.

 

Meanwhile you could use a little trick for retrieving style definitions. I've attached a video that presents how to retrieve portal style configs so that they don't have to be created manually in the code:

drawing with style from Piotr Szrajber on Vimeo.

 

0:00 - 0:20 Create PSS
0:21 - 0:55 Define feature classes - point, linear and area and display them
0:56 - 1:42 Modify styles using UI editor
1:43 - 2:10 Draw sample objects
2:11 - 2:28 Save map and download it
2:29 - 2:40 Nothing important
2:41 - 2:44 Open map JSON in text editor and copy the content
2:45 - 2:51 Copy JSON content to jsbeautifier.org and format it
2:52 - 3:05 Clean the feature, nothing important
3:06 - 3:22 Show code for drawing a styled point
3:23 - 3:28 Show correspoiding part of JSON for style definition
3:29 - 3:40 Run the code for drawing a styled point
3:41 - 3:53 Show code for drawing a styled line string
3:54 - 3:58 Show corresponding part of JSON for style definition
3:59 - 4:06 Run the code for drawing a styled line string
4:07 - 4:25 Show code for drawing a styled area
4:26 - 4:35 Show corresponding part of JSON for style definition
4:36 - 4:41 Run the code for drawing a styled area

 

The GPM used in the video is attached. You may also take a look at the following code snippets. These code snippets are not using $GP.dynamicStyles but $GP.map.draw. But the style definitions should be valid also for $GP.dynamicStyles

 

1) drawing a point with style

 

var style = {
    "bold": false,
    "color": "#FF0000",
    "horizontalAlignment": 0,
    "imageHeight": 1,
    "imageUrl": null,
    "imageWidth": 1,
    "italic": false,
    "name": "Simple point style",
    "rotation": 0,
    "rule": null,
    "size": 12,
    "styleCollectionType": 0,
    "styles": [],
    "subtype": 0,
    "translucency": 0.2,
    "type": 1,
    "underline": false,
    "verticalAlignment": 0,
    "visible": true,
    "width": 0
};

$GP.crs.setCurrent("EPSG:4326", function() {
    $GP.map.draw({
        "type": "Point",
        "coordinates": [19.5, 51.5],
        "crsId": "EPSG:4326",
        "rotation": 0,
        "style": style,
        defaultStyleName: "none",
        styleType: "Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimplePointStyle"
    }, function(r) {
        console.log(r.feature.get_geoJSON());
        r.feature.center();
    });
});

2) drawing a line with style

 

var style = {
    "bold": false,
    "color": "#993366",
    "horizontalAlignment": 0,
    "imageHeight": 0,
    "imageUrl": null,
    "imageWidth": 0,
    "italic": false,
    "name": "Simple line style",
    "rotation": 0,
    "rule": null,
    "size": 0,
    "styleCollectionType": 0,
    "styles": [],
    "subtype": 0,
    "translucency": 0,
    "type": 2,
    "underline": false,
    "verticalAlignment": 0,
    "visible": true,
    "width": 5
};

$GP.crs.setCurrent("EPSG:4326", function() {
    $GP.map.draw({
        "type": "LineString",
        "coordinates": [
            [10, 45],
            [20, 55],
            [30, 40],
            [40, 30]
        ],
        "crsId": "EPSG:4326",
        "style": style,
        defaultStyleName: "none",
        styleType: "Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimpleLineStyle"
    }, function(r) {
        console.log(r.feature.get_geoJSON());
        r.feature.center();
    });
});

3) Drawing a polygon with style:

 

var style = {
    "bold": false,
    "color": "#993366",
    "horizontalAlignment": 0,
    "imageHeight": 0,
    "imageUrl": null,
    "imageWidth": 0,
    "italic": false,
    "name": "Simple line style",
    "rotation": 0,
    "rule": null,
    "size": 0,
    "styleCollectionType": 0,
    "styles": [],
    "subtype": 0,
    "translucency": 0,
    "type": 2,
    "underline": false,
    "verticalAlignment": 0,
    "visible": true,
    "width": 5
};

$GP.crs.setCurrent("EPSG:4326", function() {
    $GP.map.draw({
        "type": "LineString",
        "coordinates": [
            [10, 45],
            [20, 55],
            [30, 40],
            [40, 30]
        ],
        "crsId": "EPSG:4326",
        "style": style,
        defaultStyleName: "none",
        styleType: "Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimpleLineStyle"
    }, function(r) {
        console.log(r.feature.get_geoJSON());
        r.feature.center();
    });
});

Best regards,

Piotr

 

Regular Contributor
Posts: 253
Registered: ‎05-01-2016

Can't change style using $GP.dynamicStyles.register on MapPublisher feature

[ Edited ]

note: editted to simplify code - the feature name is pipe071l (last character is lower case l)

Can not get style to take effect - is there an example using a "MapPublisher" feature?  For my example, feature is added to map but style is not used.

 

The video was great!  Also the point example changes the color of the points where ID > 1500  (comments said < 1500)  - I hadn't checked the code.  I changed to USA_HIGHWAYS feature to get a linear one (that one is all capitals) and made changes from point to line and that worked fine.  Cannot get style to work for my webmap publisher example though - the pipelines are always added with default black style

 

Can someone try this code?


$GP.dynamicStyles.register({
featureClassId: "SQL Server Read-Write Connection 1|pipe071l",
default: function (feature) {
return {
"style": {
"color": "#f0a",
"name": "Pipeline",
"size": 4,
"translucency": 0.8
},
defaultStyleName: "none",
styleType: "Intergraph.WebSolutions.Core.WebClient.Platform.Style.SimpleLineStyle"

};
}
}, function () {
$GP.legend.add({
url: "http://rs4/SQLServerPipesService/MapService.svc",
definitionName: "MapPublisher",
ids: ["SQL Server Read-Write Connection 1|pipe071l"],
applicationId: "sqlServerPipes",

});
});

 

(changed to remove webaddress)

Regular Contributor
Posts: 253
Registered: ‎05-01-2016

Re: $GP.dynamicStyles.register example

Hi Jan,

I finally got around to trying this techinque because the other method ( using $GP.dynamicStyles.register ) does not seem to work for a Map Publisher (GeoMedia webmap) service.  I had to go to folder C:\Program Files\Common Files\Hexagon\Services\Instances\sqlServerPipesService\ and create a js folder by copying one from another service because this instance did not have one.  I editted the StyleConfig.js file so the default linear style had the color and translucency that i wanted.  Then i cleard the cache for the service and tried adding the feature but it is still the default black color and translucency.

 

I recently submitted another message to this forum showing how when i tried to add States from the Hexagon DEMO_USA project using a "MapPublisher" service using the $GP.dynamicStyles.register technique, the style is not used.  Previously i had submitted a similar message but it was using my data which i thought could be part of the problem.  The code for the style works when used with the "Red dot" example that uses "WFA" rather than a "MapPublisher" service.

 

Thanks very much for any suggestions,

Jane

 

 

 

 

Technical Evangelist
Posts: 1,147
Registered: ‎09-11-2015

Re: $GP.dynamicStyles.register example

I did not dig much inside your code or tried it but when you're telling that it doesn't work on WMPS services - what EP version do you use? I believe there were some fixes to the styling engine related to WMPS services in EP05 (as well as in upcoming 2016).

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Regular Contributor
Posts: 253
Registered: ‎05-01-2016

Re: $GP.dynamicStyles.register example

[ Edited ]

Thanks! I'm using ep05.  I was told the SDK for 16 is not out yet. The feature displays but it with the default black style.  Have you tried using the /js folder with a webmap publisher service?  In my templates folder, the WMPS version doesn't have a /js folder so i added one.  In my previous post i gave an example that uses only Hexagon services and features that doesn't work for me - it uses highways from the DEMO data - but it doesn't use the .js file in the /js folder (it uses the $GP.dynamicStyles.register code).

Happy Fourth!

Jane