basemapleafletopenlayers-2web-mapping
I've seen such sites in the past.
I remember seeing one put together by Wm Lerer at a conference a couple years ago.
What I'm looking for is a map that demonstrates all (well, at least a lot) of the freely available basemaps (tilesets, web services, etc) that I could include in a mapping application (using OpenLayers, Leaflet, or whatever).
I completely agree that the ESRI samples are now both out of date and misleading. I notice a few samples are updated to AMD but not many. The samples embedding of JavaScript in the HTML is bad practice that most new comers seem to follow. They are just samples to get across ideas, but many don't seem to realise this.
The Basic Map Viewer provided some very useful features for working with ArcGIS online and making a configurable viewer which fits in with ESRI's AGO framework. This is probably quite similar to the app you were looking at though. Also it's also not structured very well in terms of AMD.
For structuring your code in AMD take a look at odoe's AGSModular demo. It also demonstrates how to build Esri JS code in to a single js using r.js (I never got the hang of Dojo build). It's probably going to be quite a steep learning curve if you are new to JS.
I use the HTML5 boiler plate which helps with a number of cross browser issues. It also includes modernizer for feature detection.
For responsive design I haven't found anything out of the box for web maps that is useful.
Dont be complicated if you can be simple.
1) Client-side: pure jQuery and html. JSON + Ajax to communicate with server.
function loadCities() {
var mapbounds = map.getExtent();
mapbounds.transform(toProjection, fromProjection );
bbox = mapbounds.toArray();
var bleft = bbox[0];
var bbottom = bbox[1];
var bright = bbox[2];
var btop = bbox[3];
showLoader();
var origem = "getCities?bleft=" + bleft + "&bbottom=" + bbottom + "&bright=" + bright + "&btop=" + btop;
$.ajax({
url: origem,
dataType: "json"
}).always(function() { hideLoader(); }).done(function(data) {
data = eval( data );
var geojson_format = new OpenLayers.Format.GeoJSON({
'internalProjection': map.baseLayer.projection,
'externalProjection': new OpenLayers.Projection("EPSG:4326")
});
citiesLayer.removeAllFeatures();
citiesLayer.addFeatures(geojson_format.read(data));
});
}
2) Server side: Struts Actions configured to JSON responses:
@Action(value="getCities", results= {
@Result(name="ok", type="httpheader", params={"status", "200"}) }
)
@ParentPackage("default")
public class GetCitiesAction {
public String execute(){
HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(StrutsStatics.HTTP_REQUEST);
Double bleft = Double.parseDouble( request.getParameter("bleft") );
Double bbottom = Double.parseDouble( request.getParameter("bbottom") );
Double bright = Double.parseDouble( request.getParameter("bright") );
Double btop = Double.parseDouble( request.getParameter("btop") );
int idUsuario = Integer.valueOf( request.getParameter("idUsuario") );
String resposta = "";
try {
CityController cc = new CityController( idUsuario );
IStaticElementList lista = cc.getCitiesInBBOX( bleft, bbottom, bright, btop );
resposta = lista.asJson();
} catch ( Exception e ) {
e.printStackTrace();
}
try {
HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(StrutsStatics.HTTP_RESPONSE);
response.setCharacterEncoding("UTF-8");
response.getWriter().write(resposta);
} catch (IOException ex) {
ex.printStackTrace();
}
return "ok";
}
}
Hybernate to database access. Don't forget to keep the domains. See Domain Driven Design. Mail me if in doubt (see my profile).
Best Answer
There is no organized catalog of XYZ tile servers per se. The closest thing is the leaflet-providers project which provides dozens of free basemaps. Code for integrating with leaflet is provided but it should be relatively easy to translate to OpenLayers or other mapping clients.