topic Re: Embed Points in Single HTML Map Page in ArcGIS JavaScript Maps SDK Questions

Embed Points in Single HTML Map Page

glennlawrence — Fri, 16 May 2014 09:15:03 GMT

Can anyone advise where I might find a tutorial on how to create a simple Map and add Markers/Points with popup InfoWindows and have all the code embedded in a single HTML page?

I have been browsing the Developer Samples but cannot seem to find a sample or tutorial on how to do this.

Many thanks in advance...

Glenn

Re: Embed Points in Single HTML Map Page

TimWitt — Fri, 16 May 2014 11:09:13 GMT

Glenn,

something like this? I have created map points and when you click on them or the buttons a pop-up will appear.

Tim

Re: Embed Points in Single HTML Map Page

glennlawrence — Fri, 16 May 2014 11:24:19 GMT

That's exactly it Tim,

Would there be a limit on the amount of markers/points I can have in a single page/map?

Cheers...

Re: Embed Points in Single HTML Map Page

TimWitt — Fri, 16 May 2014 11:30:05 GMT

I don't think so. Depending on how many points you wan't, your code will just get big.

Re: Embed Points in Single HTML Map Page

glennlawrence — Fri, 16 May 2014 11:36:54 GMT

Sounds good...

I probably won't have more than a couple hundred per Map so I would imaging this won't be too much of an issue.

Just as a side note, I'm quite new to Mapping and ArcGIS but looking throught the examples on the Dev site I can see we can add many options like Legends, Filtering, Searching etc. Will it be possible for me to incorporate these additions into that sample page you put together?

Re: Embed Points in Single HTML Map Page

TimWitt — Fri, 16 May 2014 11:43:59 GMT

I'm sure this is somehow possible, but most of those samples depend on a MapService published with ArcServer.

Re: Embed Points in Single HTML Map Page

glennlawrence — Fri, 16 May 2014 11:59:10 GMT

Ah, I see.

Is there are published list to show what can be used without ArcServer?

Re: Embed Points in Single HTML Map Page

TimWitt — Fri, 16 May 2014 12:04:34 GMT

Not that I'm aware of. Depending on how knowledgeable you are with javascript, you can almost do anything, unless they strictly say it can only be done with a certain ArcGIS tool that you might not be able to access since you don;t have ArcServer.

Re: Embed Points in Single HTML Map Page

glennlawrence — Fri, 16 May 2014 12:33:53 GMT

Well we won't go into the js knowledge right now...:)

But I was also thinking about trying to use some of the pre-built apps from ArcGIS online. I seen some demos were you can create and share a Map on ArcGIS online then download one of the App templates. You then just change the webmap ID to point to the Map you created.

Do you know if I can do this and still manually add in the points that you put into that sample? I have a sample here that is using the Basic Viewer App. Can I manually add in some points also to this map?

Re: Embed Points in Single HTML Map Page

TimWitt — Fri, 16 May 2014 12:42:48 GMT

Good question, but I don't know.

Re: Embed Points in Single HTML Map Page

glennlawrence — Fri, 16 May 2014 13:00:54 GMT

No worries,

Cheers for your help...

Re: Embed Points in Single HTML Map Page

JohnGravois — Mon, 19 May 2014 15:07:18 GMT

Using ArcGIS Online, you can published Tiled Map Services (consumed in our JavaScript API as ArcGISTiledMapServiceLayers) and hosted feature layers (FeatureLayers). You can also leverage utility Geocoding, Routing, Analysis, Geometry, GeoEnrichment and print services.

The only layer types I can think of at the moment which cannot be consumed without ArcGIS Server are ArcGISDynamicMapServiceLayers, image service layers, or services that incorporate custom data for geocoding, routing or geoprocessing.

also, just my two cents, but i'd argue that Tim's suggestion of programmatically defining graphics is probably not the best approach for you here. If you have more than a handful of features to manage I would highly suggest leveraging something like a hosted feature service (for example, by uploading a CSV or shapefile) instead of coding graphics by hand.

that way you can load your hosted feature service into individual webmaps, modify symbology and popups and then publish using existing templates.

Store and Query Geographic Data In Feature Services
https://developers.arcgis.com/en/features/cloud-storage/

Web map by ID
https://developers.arcgis.com/javascript/jssamples/ags_createwebmapid.html

Re: Embed Points in Single HTML Map Page

glennlawrence — Tue, 20 May 2014 13:12:00 GMT

Thank you for your input jgravois, however Tim's method was exactly what I was looking for in this case.

For certain security reasons we need to include all code in a single html page. We can reference external stylesheets and js files, however all Point location & Popup window info must be contained within the html page. It would be nice to have all of this data in an external csv that we can add to the map as a layer, however this is not possible in our setup.

Basically we will be publishing this map in a secure Extranet where users will login and will be able to open the map page to view the points/point info. As mentioned above, all info on the map must be secure and unless we do it this way, we would have to either -

1. Call the csv from another secure source, whether this be an ArcGIS source or another secure web location, which would then require the user to authenticate again. This is a Big No No as the user has already authenticated to login into the Extranet and we don't want them to have to login again.

or

2. Host the csv in a public setting, which is a Bigger No No for obvious reasons!

SSO (Single-Sign-On) will not work for this either as most of the users will be from various different domains.

Also, due to how the Extranet works it's not possible to call the csv into the Map from a secure Extranet location.

Thanks again for your input but I think this is the way we are going to have to work this one.

Cheers...

Glenn

Re: Embed Points in Single HTML Map Page

JohnGravois — Tue, 20 May 2014 13:35:14 GMT

glenn,

i wasn't talking about hosting a CSV on a web server. i was talking about publishing a RESTful service which could be queried dynamically by your application to display graphics.

you could enforce security and require a login to access the hosted feature service itself if the data is sensitive and use something like a proxy from within your application if you wanted to avoid having people login twice.

Re: Embed Points in Single HTML Map Page

glennlawrence — Thu, 22 May 2014 08:59:52 GMT

jgravois,

The RESTful service is not something that I am familiar with at all I'm afraid, I have never even heard of it...:o And for the Proxy, we don't currently have a web server to run this service on. We are basically just putting together some html pages that we upload to a Secure DataRoom (Extranet) where we can open these pages with the embedded map & features.

It would be great if we could make use of a csv file for the map points for this solution in a secure way. Maybe you can elaborate a bit more on how this could potentially work?

Cheers...

Re: Embed Points in Single HTML Map Page

JohnGravois — Tue, 27 May 2014 14:55:51 GMT

no problem Glenn,

ArcGIS Online for Organizations gives you the capability of publishing both secure and public 'hosted feature services'. afterward all of our RESTful developer APIs can be used to talk to the service interactively (ie. query for JSON features based on either a SQL clause or spatial relationship or even POST edits)

here are a few helpful links which discuss the publishing steps
https://developers.arcgis.com/tools/csv-to-feature-service/
http://video.esri.com/watch/1342/publish-hosted-feature-layers

as an alternative, our JS API now also includes a CSV layer which allows you to talk to CSVs published on a web server directly. if you can think of a way to 'secure' the CSV itself, that would be an option too.

Re: Embed Points in Single HTML Map Page

glennlawrence — Thu, 29 May 2014 07:17:52 GMT

Thanks for this jgravois,

I have been playing around with the js csv layer and it works quite well internally on my domain. The challange now will be how to secure it outside of our domain!

Thanks again...

Re: Embed Points in Single HTML Map Page

glennlawrence — Fri, 27 Jun 2014 11:22:20 GMT

Glenn,

something like this? I have created map points and when you click on them or the buttons a pop-up will appear.

Tim

Hey Tim,

Can you tell me how I may be able to change the marker symbol used in this example? Currently it just uses a default red square. If I want to have multiple points with unique symbols, how would I do this?

Many thanks in advance...

Glenn

Re: Embed Points in Single HTML Map Page

TimWitt — Sat, 11 Dec 2021 06:46:30 GMT

Glenn,

you would need to create a new symbol, depending on how many unique symbols you would like.

This is the only symbol that you have right now:

      var storepoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0,255,0,0.25]), 1),
              new Color([255,0,0])
              )

create another one:

      var storepoint2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([246,27,27,0.25]), 1),
              new Color([255,0,0]) 
              )

look here for what type of symbols you can have and look here on what type of color you would like.

Once you have your 2nd symbol type created, replace the storepoint in this code with storepoint2:

var store2 = new Graphic(singlePoint2,storepoint,attr2,infoTemplate2);

You can do this with every new point. Let me know if this is clear.

Tim

Re: Embed Points in Single HTML Map Page

glennlawrence — Fri, 27 Jun 2014 13:19:47 GMT

That works for changing alright Tim, thanks.

Do you know how I can use different symbols though, other than square, circle etc? I am hoping to use some of the ArcGIS symbols like the one - here

Cheers...