Embedding Food Oasis in Your Web Site
If you want to embed Food Oasis in your own web site, you may do so by including the following snippet in your HTML:
<iframe
src="https://la.foodoasis.net/widget"
width="100%"
height="100%"
style="margin: 0; border: 2px solid #336699; box-sizing: border-box"
>
For example, the follow HTML page will display a minimal page with Food Oasis embedded:
<html>
<body
style="margin: 1em; background-color: lightblue; font-family: sans-serif"
>
<h1>HTML Page Hosting Food Oasis</h1>
<div style="height: 80vh">
<iframe
src="https://la.foodoasis.net/widget"
width="100%"
height="100%"
style="margin: 0; border: 2px solid #336699; box-sizing: border-box"
>
>
</iframe>
</div>
</body>
</html>
The resulting page should look like this:
The above code is to access the Los Angeles version of Food Oasis. You may use some of the other regions by substituting the appropriate URL, as shown on this wiki's Home Page. For example, the url for the src attribute should be "https://hi.foodoasis.net/widget" for Hawaii.
As an example of a site where the Food Oasis app is embedded, see https://www.hackforla.org/projects/food-oasis
(Only supported on the Los Angeles site at this time)
If you append a neighborhood council query string parameter to the URL, the map will show a shaded region representing the corresponding Los Angeles neighborhood council boundary, and center the map on the centroid of the neighborhood, for example, the URL
https://la.foodoasis.net/widget?neighborhood_id=78
Will outline the South Central LA neighborhood. For a list of the Neighborhoods in Los Angeles, see the Neighborhood Councils Data Set, display the data in Table Form on that site, and find the value in the nc_id column for the neighborhood of interest. For example, our test page for the widget looks like this:
where the dashed region shows the South Central Neighborhood boundary.