nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Embed Points in Single HTML Map Page

glennlawrence

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

Vind meer berichten getagd met

Accepted answers

TimWitt

Glenn,

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

Tim

All comments

glennlawrence

That helps a lot Tim!

Thanks again for your effort and help on this...

Once I have the finished product I will post a link with a sample of what I have put together, in case anyone else finds it useful.

Cheers...

Glenn

TimWitt

Glenn,

Talking about a better marker variate, check out my latest version.

I am using PictureMarkerSymbols instead of simple points. You can either host your pictures and then replace the link that I used, or you can take advantage of the ArcGIS Online Markers that can be found here. Just grab the link of the marker you like and replace the one that I use.

Let me know if that helps!

Tim

glennlawrence

Works great,

Thanks again Tim...

TimWitt

Glenn,

I have added that function to my application. The code I added is under //ZOOM TO

http://jsfiddle.net/timw1984/dfrCn/3/

Let me know if that works!

Tim

glennlawrence

Hey Tim,

I haven't managed to figure out how to change the symbol to an image like a Pin or Buble etc. However I have just changed the shape and the colour so I can categorize this way. This should do fine for now, cheers for this...

Another quick one for you if you don't mind - There may be times that all my points won't be visable on the map due to users zooming/dragging the map etc. If I click on a button for a point that is not curretly visible on the map, the map doesn't auto move to that point and the infoWindow may only partially show, or not show at all, depending on how far the map has been zoomed or dragged away from the selected point. You can see this in your example, if you drag the map so your points are out of sight, then click on a button, you will see the points don't come back into view.

Do you have any idea how I can set the map to zoom/move back and show the current clicked point?

Many thanks in advance...

glennlawrence

Actually Tim, I should have read your post correctly! I see now you gave a link to the marker types. I'll play around with this and let you know how I get on.

Cheers...

glennlawrence

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...

TimWitt

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

glennlawrence

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

glennlawrence

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...

JohnGravois

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.

glennlawrence

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...

JohnGravois

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.

glennlawrence

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

JohnGravois

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

glennlawrence

No worries,

Cheers for your help...

TimWitt

Good question, but I don't know.

glennlawrence

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?

TimWitt

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.

glennlawrence

Ah, I see.

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

TimWitt

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

glennlawrence

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?

TimWitt

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

glennlawrence

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...

TimWitt

Glenn,

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

Tim

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.